React+TypeScript中RTK Query返回数据转数组失败，无法遍历问题

核心问题是TypeScript定义的返回类型与服务器实际返回的数据结构不匹配，导致你拿到的data并非数组类型，进而Array.isArray()返回false。按以下步骤排查修复：

1. 确认服务器返回的真实数据结构 #

先查看console.log(data)的实际输出：

• 如果输出是{ data: [...] }或{ list: [...] }这类包装对象，说明服务器没有直接返回数组，而是把数组嵌套在对象中。
• 如果输出是键值对形式（比如{ 1: {...}, 2: {...} }），那是对象而非数组。

2. 修正RTK Query的响应处理 #

如果服务器返回包装对象，在fetchDoctors中添加transformResponse提取数组：

fetchDoctors: build.query<IDoctorShort[], PaginationDoctors>({
    query: (params) => ({
        url: '/doctors',
        params: {
            _doctorID: params.doctorID,
            _limit: params.limit,
            _numofpage: params.numofpage,
            _queryParams: params.queryParams,
        }
    }),
    // 根据服务器实际返回结构调整，比如服务器返回{ data: IDoctorShort[] }
    transformResponse: (response: { data: IDoctorShort[] }) => response.data,
    providesTags: result => ['Doctor']
}),

3. 调用stableSort前做安全校验 #

RTK Query的data初始值是undefined，且可能因接口返回异常导致非数组，调用排序前必须做判断：

// 假设你已定义排序比较器comparator
const sortedDoctors = data 
  ? (Array.isArray(data) ? stableSort(data, comparator) : []) 
  : [];

4. 临时应急处理（不修改RTK Query时） #

如果服务器返回的是键值对对象，可通过Object.values()转数组：

const doctorArray = Array.isArray(data) ? data : Object.values(data) as IDoctorShort[];
const sortedDoctors = stableSort(doctorArray, comparator);

5. 排查TypeScript类型定义准确性 #

检查IDoctorShort接口是否与服务器返回的单条医生数据结构完全匹配，避免因类型定义错误导致的认知偏差。

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