React TypeScript报错：JSX.Element无法赋值给ReactNode如何修复？

错误原因 #

你直接把组件函数ClientComponent放在JSX中（{ClientComponent}），这相当于把函数本身当作可渲染内容（ReactNode），但React需要的是组件实例而非组件函数本身。组件函数必须通过JSX标签调用，才能生成React可识别的渲染元素。

修复方法 #

1. 改用JSX标签渲染组件并传递必填的Token属性 #

把原代码中的：

{ClientComponent}

替换为：

<ClientComponent Token="你的Token值" />

如果Token是动态变量（比如来自父组件的props或state），则用变量传递：

<ClientComponent Token={yourTokenVariable} />

2. （可选）优化组件类型定义（更规范的TS写法） #

可以明确定义组件的Props类型，并用React.FC标注组件，让类型检查更严谨：

// 定义组件Props类型
type ClientComponentProps = {
  Token: string;
};

// 用React.FC标注组件
const ClientComponent: React.FC<ClientComponentProps> = ({ Token }) => {
  return (
    <div>
      {Token ? <div>Customer exists</div> : null}
    </div>
  );
};

这样既解决了lint错误，也让代码的类型逻辑更清晰，避免后续遗漏props的问题。

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