Next.js：“组件”不能用作 JSX 组件

Question

为什么我在这一行中遇到错误？

<Provider store={store}>{getLayout?(<Component {...pageProps} />)}</Provider>

(parameter) Component: NextComponentType<NextPageContext, any, {}> & NextPageWithLayout
'Component' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<{}, any, any>' is not a valid JSX element.
    Type 'Component<{}, any, any>' is not assignable to type 'Element | ElementClass'.
      Type 'Component<{}, any, any>' is not assignable to type 'ElementClass'.
        The types returned by 'render()' are incompatible between these types.
          Type 'React.ReactNode' is not assignable to type 'import("/Users/kukodajanos/Workspace/Tikex/Portal/Team/node_modules/@types/styled-jsx/node_modules/@types/react/index").ReactNode'.
            Type '{}' is not assignable to type 'ReactNode'.

完整组件：

<Provider store={store}>{getLayout?(<Component {...pageProps} />)}</Provider>

我将 Next.js 升级到最新版本，也许这会导致一些问题？

"next": "12.1.0",

我需要在 中同时使用普通参考和 TypeScript 参考吗package.json，你知道吗？

(parameter) Component: NextComponentType<NextPageContext, any, {}> & NextPageWithLayout
'Component' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<{}, any, any>' is not a valid JSX element.
    Type 'Component<{}, any, any>' is not assignable to type 'Element | ElementClass'.
      Type 'Component<{}, any, any>' is not assignable to type 'ElementClass'.
        The types returned by 'render()' are incompatible between these types.
          Type 'React.ReactNode' is not assignable to type 'import("/Users/kukodajanos/Workspace/Tikex/Portal/Team/node_modules/@types/styled-jsx/node_modules/@types/react/index").ReactNode'.
            Type '{}' is not assignable to type 'ReactNode'.

Answer 1

我通过删除yarn.lock 文件修复了这个问题。跨软件包版本的类型存在问题。

“预安装”：“npx npm-force-分辨率”“@types/react”：“17.0.30”

Answer 2

没有什么可以“认真”推荐的，但我能够通过省略类型来解决该错误：

function MyApp({ Component, pageProps }: AppProps) {
  const AnyComponent = Component as any;
  return <AnyComponent {...pageProps} />;
}