TypeError: data.map is not a function 接口数据遍历报错排查

两个核心错误导致你遇到的报错：

1. TypeScript接口定义与实际接口返回结构不匹配：你定义的IData类型中，users字段标注为单个IUsers对象，但实际接口返回的users是用户对象数组；同时你没有给RTKQ接口端点声明正确的返回类型，TS错误将data推断为IData[]数组类型，才会出现property 'users' doesn't exist on type IData[]的TS提示。
2. 渲染逻辑错误：接口返回的data本身是单层对象，不是数组，直接调用data.map()会触发运行时的TypeError: data.map is not a function错误，这个场景完全不需要使用Object.entries。

1. 修正TS接口定义 #

把users字段的类型改为数组类型，推荐把单个用户的接口名调整为单数语义更清晰：

// 单个用户结构
export interface IUser {
  id: number,
  name: string,
  surname: string,
  email: string
}

// 接口整体返回结构
export interface IData {
  title: string,
  info: string,
  users: IUser[], // 修正：users是用户数组，不是单个用户对象
  resource: {
    url: string,
    description: string
  }
}

2. 修正RTKQ端点类型声明 #

在你定义DataAPI的useFetchAllDataQuery对应端点时，明确标注返回值类型为IData，不要让TS自动推断为数组类型。

3. 修正页面渲染逻辑 #

users数组是data对象下的属性，直接遍历该数组即可，用可选链?.做空值保护更简洁：

const { data } = DataAPI.useFetchAllDataQuery('')

// 渲染部分
{data?.users?.map(user => (
  <User user={user} key={user.id}/>
))}

改完之后TS类型报错和浏览器运行时报错都会消失，不需要额外用Object.entries做转换。

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