React组件渲染嵌套对象时TypeScript类型错误修复

React 对象渲染报错：彻底解决 TypeScript 的 "ReactNode" 类型冲突

在 React 开发中，你可能会遇到这样的常见场景：当你试图直接渲染一个普通的 JavaScript 对象，比如 { one: "...", two: "...", three: "..." } 时，TypeScript 将会毫不留情地抛出一个类型错误——Type '...' is not assignable to type 'ReactNode'。这个报错其实非常明确：React 无法自动将一个对象“转换”成可以直接显示在页面上的内容。你必须要手动地提取对象的每个属性，并逐个进行渲染。

这个错误的根源，实际上在于 JSX 中对 feature 的简单插值写法：{feature}。React 明确规定，所有插入到 JSX 中的表达式，必须是合法的 ReactNode ——即 null、undefined、字符串、数字、布尔值、React 元素（如

）、数组或者 Fragment。而普通对象，并不在这个允许的范围内。这里的 feature 恰好是一个包含 one、two、three 属性的对象字面量，TypeScript 在编译阶段经过严格校验后，自然就会阻止它作为子节点传入。

正确的处理方式：解构这个对象，分别渲染它的每一个字段。以下是修复后的完整 pricingCard 实现：

const pricingCard = prices.map(({ name, price, features }) => (
  

    
{name}
    
{price}
    

      {features.map((feature, idx) => (
        

          
          

            
{feature.one}
            
{feature.two}
            
{feature.three}
          

        
      ))}
    
  

));

核心注意事项

• 不要遗漏 key 属性：在 features.map(...) 中，每个
• 都必须具备唯一的 key。这里推荐使用索引 idx，因为 feature 本身不包含天然 ID；如果数据结构更复杂，建议后端返回唯一标识。
• Fragment 的写法需谨慎：原始代码中使用了 <>... 但未正确返回——JSX 片段必须作为函数返回值，不能单独出现在 .map() 回调里，除非显式地使用 return 或用括号包裹。
• 类型安全至关重要（强烈推荐）：为 prices 数据定义清晰的接口，能让代码的可维护性与 IDE 支持大幅提升：

interface FeatureItem {
  one: string;
  two: string;
  three: string;
}

interface PricingPlan {
  name: string;
  price: string;
  features: FeatureItem[];
}

const prices: PricingPlan[] = [ /* ... */ ];

总结一下：React 的渲染机制不允许将对象隐式转换为字符串。所有嵌套数据，都必须显式地解构，再转化为合法的 ReactNode。这并不是 TypeScript 在故意“找茬”，恰恰相反，它是前端健壮性的有力保障——在开发阶段就提前拦截了潜在的运行时错误（例如 Cannot convert object to string），帮助你编写更可靠、更容易维护的代码。