TypeScript中React/SolidJS遍历props对象的写法及报错解决

JSX 没有提供直接遍历普通对象的专用语法，不管是 React 原生的数组 map 渲染，还是 SolidJS 内置的 <For> 组件，都只接收数组类型作为遍历入参，遍历对象必须先将对象转换为键、值或键值对组成的数组，不存在特殊变通语法。

报错根因 #

你遇到的Object is of type 'unknown'类型错误和遍历语法无关，问题出在两点：

• 你将组件 props 整体标注为any类型，TypeScript 无法推导props.someObject的内部结构，自然也无法判断Object.values()取出的值的类型，因此会将 value 判定为unknown，直接访问.name属性就会触发类型报错。
• SolidJS 的<For>组件的each属性仅支持传入数组，你直接将普通对象传给each属于用法错误，即使绕开类型检查，运行时也无法正常渲染。

修正实现步骤 #

1. 定义明确的类型声明，放弃any这种跳过类型校验的写法
   首先根据someObject的实际结构定义对应类型，比如存储的每个子项都包含name字段时：

   // 遍历项的结构类型
   interface ListItem {
     name: string;
     // 其余字段按需补充
   }
   // 组件props类型
   interface MyComponentProps {
     someObject: Record<string, ListItem>;
   }
   

2. 将对象转换为数组后再传入遍历逻辑，根据业务需求选择转换方法：
   • 仅需要遍历对象属性值：使用Object.values(目标对象)
   • 需要同时获取属性键和值：使用Object.entries(目标对象)
   • 仅需要遍历对象属性键：使用Object.keys(目标对象)

通用 map 写法（React/SolidJS 均适用） #

interface ListItem {
  name: string;
}
interface MyComponentProps {
  someObject: Record<string, ListItem>;
}
export default function MyComponent(props: MyComponentProps) {
  return (
    <>
      {/* 仅遍历值的写法，注意箭头函数直接返回JSX时用圆括号包裹，不要漏写return */}
      {Object.values(props.someObject).map(value => (
        <div>{value.name}</div>
      ))}

      {/* 同时获取键和值的写法，Solid/React列表渲染推荐加唯一key */}
      {Object.entries(props.someObject).map(([key, value]) => (
        <div key={key}>{value.name}</div>
      ))}
    </>
  )
}

SolidJS <For> 组件写法 #

<For>组件必须接收数组类型的each入参，先将对象转成数组再传入即可：

import { For } from 'solid-js';

interface ListItem {
  name: string;
}
interface MyComponentProps {
  someObject: Record<string, ListItem>;
}
export default function MyComponent(props: MyComponentProps) {
  return (
    <For each={Object.values(props.someObject)}>
      {(value) => <div>{value.name}</div>}
    </For>
  )
}

临时调试场景如果暂时不需要完整类型校验，可以使用类型断言快速绕开报错：Object.values(props.someObject as Record<string, {name: string}>)，但不推荐在生产代码中大量使用，会丢失TypeScript的类型保护能力。
注意：如果map回调函数用大括号包裹逻辑体，必须手动写return返回JSX元素，否则会出现渲染空白的问题，你最初的代码就存在这个隐性问题。

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