因TypeScript类型错误无法遍历数组：'void[]'不能赋值给'ReactNode'

错误原因分析 #

你遇到的Type 'void[]' is not assignable to type 'ReactNode'错误，本质是遍历数组时没有返回有效的JSX元素集合：

• 若使用forEach遍历数组，它的返回值是void，最终得到的void[]无法被React渲染；
• 若使用map但未显式返回JSX元素，也会导致返回void[]。

分步解决方案 #

1. 定义对象类型 #

先明确存储的对象结构，给它定义TypeScript类型：

// 根据你的API返回数据结构调整字段
type Country = {
  id: number;
  name: string;
  capital?: string;
  population?: number;
};

2. 正确初始化useState #

给useState指定泛型类型，确保状态是该类型的数组：

import { useState } from 'react';

const [countryData, setCountryData] = useState<Country[]>([]);

3. 修复JSX遍历逻辑 #

把forEach替换成map，并且确保map内部返回JSX元素：

// 错误写法（forEach返回void[]）
{countryData.forEach(country => {
  <div key={country.id}>{country.name}</div>
})}

// 正确写法（map返回JSX.Element[]）
{countryData.map(country => (
  <div key={country.id} className="country-item">
    <h3>{country.name}</h3>
    {country.capital && <p>首都：{country.capital}</p>}
  </div>
))}

4. API数据获取的类型断言 #

调用API时，把返回的数据断言为你定义的类型数组，避免类型不匹配：

const fetchCountryData = async () => {
  try {
    const response = await fetch('https://your-api-endpoint.com/countries');
    const data = await response.json() as Country[];
    setCountryData(data);
  } catch (error) {
    console.error('获取数据失败:', error);
  }
};

// 按钮点击触发
<button onClick={fetchCountryData}>加载国家数据</button>

关键注意点 #

• 必须给map的元素加唯一key属性，这是React列表渲染的要求；
• 如果API返回的数据结构不确定，可以用可选链（?.）或条件渲染避免空值报错；
• 若状态可能为undefined，可以把类型定义为Country[] | undefined，但初始化时建议设为[]避免额外的空值判断。

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