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），帮助你编写更可靠、更容易维护的代码。
