使用自定义条件渲染组件时遇JSX.Element无法赋值给React.ReactNode错误

首先明确：React.ReactNode类型本身是包含JSX.Element的，你遇到的报错并非两者本质不兼容，而是类型引用或项目配置的问题，以下是具体解决方法：

1. 确保组件中正确导入React #

React.ReactNode是React命名空间下的类型，必须显式导入React才能让TypeScript正确识别该类型。修改你的Show.tsx：

import React from 'react';

interface Props {
  when: boolean;
  fallback?: React.ReactNode;
  children: React.ReactNode;
}

function Show(props: Props) {
  if (props.when) {
    return props.children;
  }
  return props.fallback ?? null;
}

export default Show;

注：Next.js 12+支持自动JSX导入，不需要手动导入React来写JSX，但类型引用仍需依赖React导入。

2. 检查tsconfig.json配置 #

确保项目的TypeScript配置符合React/Next.js的要求，重点检查compilerOptions中的以下字段：

{
  "compilerOptions": {
    "jsx": "react-jsx", // Next.js 12+推荐使用自动JSX runtime
    "target": "ESNext",
    "moduleResolution": "node",
    "strict": true // 开启严格类型检查有助于避免隐性类型问题
  }
}

3. 临时绕过方案（不推荐） #

如果上述配置调整后仍有问题，可以通过类型断言临时绕过检查，但这只是权宜之计，建议优先从配置层面解决：

<Show
  when={connectionStatus}
  fallback={
    <div className="border rounded bg-red-400 py-2 px-5">
      ❌ disconnected
    </div> as React.ReactNode
  }
>
  <div className="border rounded bg-green-400 py-2 px-5">
    ✅ connected
  </div>
</Show>

补充说明 #

你对React.ReactElement和JSX.Element的理解是对的：两者本质都是React.createElement的返回值，仅命名空间不同。而React.ReactNode是一个更宽泛的联合类型，包含了ReactElement、字符串、数字、null、undefined、ReactNode数组等，所以JSX.Element完全可以赋值给React.ReactNode。报错的核心原因是TypeScript因配置或引用问题，无法正确识别两者的兼容关系。

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