React+TypeScript报错：类型'{ [x: string]: any; items: Items; }[]'无法赋值给'ReactNode'

直接错误原因 #

你当前的TypeScript报错，核心是多余的大括号导致React接收了错误的返回类型：
在containers.map的回调函数里，你用{}包裹了内层items[containerId].map的结果，这会被解析成一个对象字面量（TypeScript误判为{ [x: string]: any; items: Items; }[]），但React期望每个map回调返回的是ReactNode类型（比如JSX元素、数组等），类型不匹配就触发了报错。

修复步骤 #

1. 移除多余的大括号 #

把内层的{}去掉，让回调直接返回内层map生成的JSX数组：

type Items = Record<string, string[]>;

export default function App() {
  const [items, setItems] = useState<Items>({
    "A": ["1", "2", "3"],
    "B": ["4", "5", "6"],
    "C": ["7"],
  });
  const [containers, setContainers] = useState(Object.keys(items));

  return <div>
    {containers.map((containerId) => 
      items[containerId].map((itemId) => (
        <p key={itemId}>{itemId}</p>
      ))
    )}
  </div>;
}

注意：别忘了给每个循环生成的JSX元素加上key属性，这是React的要求，避免渲染警告。

2. 优化类型精确性（可选但推荐） #

Object.keys(items)默认返回string[]，但你的items的键是明确的"A"|"B"|"C"，可以手动指定containers的类型，让TypeScript更准确地推断items[containerId]的类型，避免潜在的undefined报错：

type Items = Record<string, string[]>;
// 提取Items的键类型
type ContainerId = keyof Items;

export default function App() {
  const [items, setItems] = useState<Items>({
    "A": ["1", "2", "3"],
    "B": ["4", "5", "6"],
    "C": ["7"],
  });
  // 指定containers的类型为ContainerId数组
  const [containers, setContainers] = useState<ContainerId[]>(Object.keys(items) as ContainerId[]);

  return <div>
    {containers.map((containerId) => 
      items[containerId].map((itemId) => (
        <p key={`${containerId}-${itemId}`}>{itemId}</p>
      ))
    )}
  </div>;
}

这里把key设为${containerId}-${itemId}是为了避免不同container下的itemId重复导致的key冲突。

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