React 18升级后Type 'unknown'无法赋值给ReactNode的类型错误原因咨询

从React 17升级到React 18后，会遇到这样的TypeScript类型错误：Type 'unknown' is not assignable to type 'ReactNode'.ts(2322)，尽管表面上React 17和18的children类型定义都是children?: ReactNode | undefined，但两者的类型检查严格性存在关键差异。

复现代码 #

<tr>
  <td>Testing unknown</td>
  <td>{'unknown'}</td>
</tr>
<tr>
  <td>Testing unknown</td>
  <td>{'unknown' as unknown}</td>
</tr>
<tr>
  <td>Testing unknown</td>
  <td>
    <>{'unknown' as unknown}</>
  </td>
</tr>

错误详情 #

Type 'unknown' 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 'DetailedHTMLProps<TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>'

核心原因分析 #

React 18对TypeScript的类型检查逻辑做了严格化调整，核心集中在JSX元素children的校验上：

• React 17的类型系统存在宽松兼容：尽管children标注为ReactNode，但TypeScript的类型检查允许unknown类型隐式通过校验，相当于存在类型漏洞。
• React 18修复了该漏洞，严格执行ReactNode的类型约束：ReactNode的实际类型是string | number | boolean | ReactElement<any, any> | Iterable<ReactNode> | null | undefined，而unknown不属于上述任何一种类型，也无法隐式转换为这些类型，因此直接触发类型错误。
• 同时，React 18对Fragment（<></>）的children校验也同步严格化，所以第三个例子中的Fragment包裹写法同样报错。

解决方式 #

如果需要传递unknown类型的值作为children，必须显式将其转换为ReactNode兼容的类型，比如：

// 显式断言为string类型
<td>{('unknown' as unknown) as string}</td>

// 处理可能为null/undefined的unknown值
<td>{(unknownValue as string) ?? ''}</td>

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