NextJS 道具显示警告

Question

刚开始学接下来有问题。当我尝试将道具从 parent 发送到 child 时，我收到了一些错误：
Type '({ name }: { name: any; }) => JSX.Element' 不可分配给类型 'NextPage<{}, {}>'。类型 '({ name }: { name: any; }) => JSX.Element' 不可分配给类型 'FunctionComponent<{}> & { getInitialProps?(context: NextPageContext): {} | Promise<{}>; }'。类型 '({ name }: { name: any; }) => JSX.Element' 不可分配给类型 'FunctionComponent<{}>'.

代码

import type { GetServerSideProps, NextPage } from 'next';
import PositionData from './positionContainer';

const Home: NextPage = () => {
  return (
    <div>
      Weather
      <PositionData name={'hello'}/>
    </div>
  );
};
export default Home;

错误的组件：

import { NextPage } from "next";

const PositionData: NextPage = ({name}:{name: any}) =>{
    return (
        <>
            <p>Current name is: {name}</p>
        </>
    );
};

export default PositionData;

Answer 1

您必须使用提供的泛型为 NextPage 创建属性类型。


interface Props {
  name: any;
}

const PositionData: NextPage<Props> = ({name}:Props) =>{

NextJS 道具显示警告

NextJS props shown warning

typescript

next.js

代码

错误的组件：