类型 '({ articles }: Props) => JSX.Element' 不可分配给类型 'NextPage<{}, {}>'

Question

我之前使用过 Vue.js 之后才进入 React.js 和 Next.js。我遇到了一个奇怪的打字稿错误，但奇怪的是，尽管 VS Code 向我抱怨它好像无法编译，但它实际上编译了。

我正在尝试将 Article 的数组作为 prop 传递到我的主组件中。

这里是相关代码：

interface Article {
  userId: number;
  id: number;
  title: string;
  body: string;
}

interface Props {
  articles: Article | Article[];
}

const Home: NextPage = ({ articles }: Props) => {
  return (
    <div>
      {/* some stuff */}
    </div>
  );
};

Home 带有红色下划线，当我将鼠标悬停在上面时会出现错误：

const Home: NextPage<{}, {}>
Type '({ articles }: Props) => JSX.Element' is not assignable to type 'NextPage<{}, {}>'.
  Type '({ articles }: Props) => JSX.Element' is not assignable to type 'FunctionComponent<{}> & { getInitialProps?(context: NextPageContext): {} | Promise<{}>; }'.
    Type '({ articles }: Props) => JSX.Element' is not assignable to type 'FunctionComponent<{}>'.
      Types of parameters '__0' and 'props' are incompatible.
        Property 'articles' is missing in type '{ children?: ReactNode; }' but required in type 'Props'.

任何有关这里可能发生的事情的帮助或见解将不胜感激。

Answer 1

你可以这样写:

import React , {FC} from 'react';

interface Article {
  userId: number;
  id: number;
  title: string;
  body: string;
}

interface HomeProps {
  articles: Article[];
}

const Home : FC<HomeProps> = ({articles}) => {

console.log('articles: ', articles)

  return (
    <div>
      {/* some stuff */}
    </div>
  );
};

并在容器中：


const myArticles = [
 {
   userId: 1,
   id: 1,
   title: 'my title',
   body: 'my body',
 }
]
...
return (
 <Home articles={myArticles}>
)

Answer 2

这样称呼，

const Home: NextPage<Props> = ({ articles }) => {//your code}

您使用的是 NextPage 类型，我也使用了它。实际上使用 const Home: NextPage 会更好，因为它会同时输入组件的 props 和 return type.

类型 '({ articles }: Props) => JSX.Element' 不可分配给类型 'NextPage<{}, {}>'

Type '({ articles }: Props) => JSX.Element' is not assignable to type 'NextPage<{}, {}>'

typescript

reactjs

tsx

next.js