当在 React 中尝试直接渲染一个普通 JavaScript 对象（如 { one: "...", two: "...", three: "..." }）时，TypeScript 会报错 Type '...' is not assignable to type 'ReactNode'，因为 React 无法自动将对象转换为可渲染的 DOM 内容；必须显式提取并渲染其字符串属性。
当在 react 中尝试直接渲染一个普通 javascript 对象（如 `{ one: "...", two: "...", three: "..." }`）时，typescript 会报错 `type '...' is not assignable to type 'reactnode'`，因为 react 无法自动将对象转换为可渲染的 dom 内容；必须显式提取并渲染其字符串属性。
该错误的根本原因在于：React 节点（ReactNode）只接受字符串、数字、JSX 元素、数组、null、undefined 或 Fragment 等可渲染类型，而不能直接接收普通对象。你在 features.map 中写的 <span>{feature}</span> 实际上是把整个对象（例如 { one: "add 2500 Order Monthly", ... }）传给了 JSX 插值，这违反了 React 的类型约束。
✅ 正确做法是解构对象属性并逐个渲染。以下是修复后的完整示例代码：
const pricingCard = prices.map(({ name, price, features }) => (
<div key={name} className="p-6 border rounded-lg">
<h3 className="text-xl font-bold">{name}</h3>
<p className="text-2xl font-semibold mt-2">{price}</p>
<ul className="mt-4 space-y-2">
{features.map((feature, idx) => (
<li key={idx} className="flex items-start space-x-3">
<svg className="flex-shrink-0 w-5 h-5 text-green-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
</svg>
<div>
<p className="font-medium">{feature.one}</p>
<p className="text-sm text-gray-600">{feature.two}</p>
<p className="text-sm text-gray-600">{feature.three}</p>
</div>
</li>
))}
</ul>
</div>
));? 关键修正点说明：
- ✅ 移除无效的 <></> 片段包裹（它未被赋值或返回，且内部无实际作用）；
- ✅ 使用 feature.one / feature.two / feature.three 显式访问属性，确保传入 ReactNode 类型；
- ✅ 为 features.map 添加唯一 key（推荐使用索引 idx，若 features 数组结构稳定；更佳实践是引入唯一 ID 字段）；
- ✅ 外层 prices.map 同样需添加 key（此处用 name，假设其唯一）；
- ⚠️ 注意：若 features 是多元素数组（当前每个套餐仅含一个 feature 对象），上述写法已兼容；如未来扩展为多个 feature 条目，当前结构仍可自然渲染。
? 延伸建议：
- 为提升类型安全性，可定义明确接口：
interface FeatureItem { one: string; two: string; three: string; } interface PricingPlan { name: string; price: string; features: FeatureItem[]; } const prices: PricingPlan[] = [...]; - 避免直接 console.log(feature) 或 JSON.stringify(feature) 渲染到 UI —— 这虽能“绕过”类型错误，但不符合语义化与可访问性要求。
通过精准解构与结构化渲染，即可彻底解决 is not assignable to type 'ReactNode' 报错，并构建出清晰、健壮、可维护的定价卡片组件。
