TypeScript 错误解析：如何正确渲染嵌套对象中的 ReactNode-js教程-PHP中文网

TypeScript 错误解析：如何正确渲染嵌套对象中的 ReactNode

当在 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 中写的 {feature} 实际上是把整个对象（例如 { 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"></path></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>
));

? 关键修正点说明：

React Best Practices 2 0.1.0

React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。

下载

✅ 移除无效的 > 片段包裹（它未被赋值或返回，且内部无实际作用）；
✅ 使用 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[] = [...];