React(Next.js)报错：'Component'无法作为JSX组件使用的求助

报错信息 #

'Component' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<{}, any, any> | null' is not a valid JSX element.
    Type 'Component<{}, any, any>' is not assignable to type 'Element | ElementClass | null'.
      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("...filepath.../node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'.
            Type '{}' is not assignable to type 'ReactNode'.

项目代码（_app.tsx） #

import * as React from "react"
import { ApolloProvider } from "@apollo/client"
import { theme } from "@boilerplate/theme"
import { ChakraProvider } from "@chakra-ui/react"
import type { NextPage } from "next"
import type { AppProps } from "next/app"
import Head from "next/head"

import { useApollo } from "lib/apollo/client"

type NextPageWithLayout = NextPage & {
  getLayout?: (page: React.ReactElement) => React.ReactNode
}

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout
}

export default function BoilerplateApp(props: AppPropsWithLayout) {
  const { Component, pageProps } = props
  const apolloClient = useApollo(pageProps.initialApolloState)
  const getLayout = Component.getLayout ?? ((page) => page)
  
  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Head>
      <ChakraProvider theme={theme}>
        <ApolloProvider client={apolloClient}>{getLayout(<Component {...pageProps} />)}</ApolloProvider>
      </ChakraProvider>
      
    </>
  )
}

已尝试操作 #

• 将return内容包裹在Fragment中
• 重装node_modules

问题分析与解决方案 #

这个错误的核心是React类型依赖版本不一致：react-transition-group内部嵌套安装的@types/react版本，和项目根目录的@types/react版本不匹配，导致两个环境下的ReactNode类型无法兼容。

具体解决步骤： #

1. 强制统一React类型版本
   在项目根目录的package.json中添加resolutions字段，强制所有依赖使用同一版本的@types/react和@types/react-dom：

   "resolutions": {
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0"
   }
   

   替换版本号为你项目实际使用的React对应的类型版本（可查看根目录package.json中的react版本对应匹配）。

   • 若使用npm，需先安装npm-force-resolutions工具，再执行安装；若使用yarn，直接支持该字段。

2. 清理并重装依赖

   • 删除node_modules、package-lock.json（npm）或yarn.lock（yarn）
   • 重新执行npm install或yarn install

3. 检查组件返回值合法性
   确保项目中所有页面组件的getLayout函数返回合法的ReactNode类型——禁止返回空对象{}，需返回null、<></>或具体JSX元素。

4. 更新相关依赖
   尝试将react-transition-group、@chakra-ui/react、@apollo/client等依赖更新至最新兼容版本，避免因依赖过旧引发的类型冲突。

内容的提问来源于stack exchange，提问作者Mel