Type 'Item'不可赋值给'ReactNode'错误原因及片段修复疑问

错误原因 #

React组件的子节点（比如<motion.li>内部的内容）必须是ReactNode类型，涵盖字符串、React元素、null/undefined、数字等可被React直接渲染的内容。但你直接将Item类型的对象传入<motion.li>，而Item是你自定义的对象类型：

export type Item = {
  listItem: string;
};

该对象本身不属于ReactNode的合法范围，TypeScript会严格校验类型匹配，因此抛出这个错误。

你的误解点 #

你提到“原本以为数组中的每个元素只是字符串”，但实际上你定义的listItems是Item[]类型——数组内的每个元素是包含listItem字符串属性的对象，而非字符串本身。

空片段包裹错误消失的原因 #

用<>{listItem}</>包裹时，React会尝试将对象转换为字符串（最终渲染出[object Object]），同时TypeScript对片段子节点的类型检查会有所放宽，因此错误暂时消失，但这是错误的解决方式，渲染结果并不是你预期的文本内容。

正确解决方法 #

在map遍历过程中，访问Item对象的listItem属性，将字符串传递给<motion.li>：

{listItems.map((listItem, index) => (
  <motion.li key={index} variants={item} className="flex gap-3">
    {listItem.listItem} {/* 提取对象中的字符串属性 */}
  </motion.li>
))}

这样既符合TypeScript的类型要求，也能正确渲染出目标文本内容。

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