Type '{}'无法赋值给ReactNode类型的React组件报错修复求助

问题描述 #

维护他人编写的React+TypeScript项目时，运行应用出现类型错误，提示Type '{}' is not assignable to type 'ReactNode'，需解决该类型兼容问题。

相关代码 #

const ConditionalLink = (props: ConditionalLinkProps) =>
    !!props.condition && props.to ? (
        <Link to={props.to} className="Card__Link">
            {props.children}
        </Link>
    ) : (
        <>{props.children}</>
    );

interface Props {
    headline: string;
    preamble?: string;
    image?: ImageObject;
    guid: string;
    link?: string;
    status?: string;
    startDate?: DateObject;
    endDate?: DateObject;
}

错误信息 #

Type 'React.ReactNode' is not assignable to type 'import("d:/Development/Work Projects/ssu/ssuplus.frontend/node_modules/@types/testing-library__react/node_modules/@types/react/index").ReactNode'.
  Type '{}' is not assignable to type 'ReactNode'.ts(2322)
index.d.ts(1376, 9): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & LinkProps<unknown> & RefAttributes<HTMLAnchorElement>'

Type '{}' is not assignable to type 'ReactNode'.  TS2322

    15 |        !!props.condition && props.to ? (
    16 |                <Link to={props.to} className="Card__Link">
  > 17 |                        {props.children}
       |                        ^
    18 |                </Link>
    19 |        ) : (
    20 |                <>{props.children}</>

项目依赖配置 #

dependencies #

{
    "@datapunt/matomo-tracker-react": "^0.5.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "@types/classnames": "^2.2.10",
    "@types/jest": "^24.9.1",
    "@types/node": "^12.12.34",
    "@types/react": "^16.9.31",
    "@types/react-dom": "^16.9.6",
    "@types/react-router": "^5.1.5",
    "@types/react-router-dom": "^5.1.5",
    "@types/react-select": "^4.0.7",
    "@types/react-slick": "^0.23.4",
    "@types/styled-components": "^5.0.1",
    "classnames": "^2.3.1",
    "normalize.css": "^8.0.1",
    "npm-normalize-package-bin": "^1.0.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-icalendar-link": "^3.0.2",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "^3.4.1",
    "react-select": "^4.0.2",
    "react-slick": "^0.25.2",
    "serve": "^11.3.0",
    "slick-carousel": "^1.8.1",
    "styled-components": "^5.0.1",
    "typescript": "^4.8.4",
    "uuid": "^8.3.2"
}

devDependencies #

{
    "@types/uuid": "^8.3.0",
    "sass": "^1.56.0",
    "ticks-to-date": "^1.0.3"
}

修复方案 #

1. 解决@types/react版本冲突 #

错误核心是项目存在两个不同版本的@types/react（根依赖v16.9.31和@testing-library/react嵌套的版本），导致ReactNode类型不兼容。

• Yarn用户：在package.json中添加resolutions字段，强制统一版本：

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

  执行yarn install重新安装依赖。

• npm用户：先安装npm-force-resolutions工具，再配置版本强制：

  npm install npm-force-resolutions --save-dev
  

  修改package.json：

  "scripts": {
    "preinstall": "npx npm-force-resolutions"
  },
  "resolutions": {
    "@types/react": "^16.9.31",
    "@types/react-dom": "^16.9.6"
  }
  

  执行npm install。

2. 完善ConditionalLinkProps类型声明 #

代码中使用了ConditionalLinkProps但未定义，补充完整类型确保children符合ReactNode规范：

import { ReactNode } from 'react';
import { LinkProps } from 'react-router-dom';

interface ConditionalLinkProps extends Omit<LinkProps, 'to'> {
    condition: boolean;
    to?: string;
    children: ReactNode;
}

3. 处理children边界情况 #

若props.children可能传入空对象{}，添加默认值或类型守卫确保内容合法：

const ConditionalLink = (props: ConditionalLinkProps) => {
    const validChildren = props.children ?? null;
    return !!props.condition && props.to ? (
        <Link to={props.to} className="Card__Link">
            {validChildren}
        </Link>
    ) : (
        <>{validChildren}</>
    );
};

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