为什么这个 next.js 和打字稿页面说 "Property 'data' does not exist on type"

Question

我开始使用带有 next.js

的打字稿

const Index: NextPage = (props) => {

  return (<p>{prop.data.name}</p>);

}
export default Index;

export const getServerSideProps = async () => {
    const data = await fetch(
        `${server}/api`
    ).then((response) => response.json());
    return {
        props: {data}
    };
};

我的编辑在这条消息中突出显示了 {props.data.name} 中的单词数据

Property 'data' does not exist on type '{ children?: ReactNode; }'.

我如何从中定义类型？

Answer 1

您需要定义一个类型并将其传递给 NextPage 的泛型参数，如下所示

type PictureType = {
   category: string,
   createdAt: string,
   favourites: number,
   isHidden: boolean,
   title: string,
   updatedAt: string,
   url: string,
   user: string,
}
type ResponseDataType = {
   lastPictures: PictureType[],
   picturesByCat: PictureType[]
}
type PageProps = {
   data: ResponseDataType, 
}
const Index: NextPage<PageProps> = (props) => {

  return (<p>{prop.data.name}</p>);

}
export default Index;

export const getServerSideProps = async () => {
    const data = await fetch(
        `${server}/api`
    ).then((response) => response.json());
    return {
        props: {data}
    };
};

为什么这个 next.js 和打字稿页面说 "Property 'data' does not exist on type"

Why this next.js and typescript page says "Property 'data' does not exist on type"

javascript

typescript

reactjs

next.js