React TypeScript使用Axios请求数据时的类型错误排查

阿华AIGC实验室

2026-5-9

解决React + TypeScript + Axios请求数据的类型不匹配问题

让我帮你排查一下问题所在——你遇到的类型错误根源在于**ProductResponse的类型定义和Axios返回的实际数据结构不匹配**。

问题分析

你当前定义的ProductResponse是：

export type ProductResponse = { data: { code: number, data: Array<Product> } }

但这里有个关键误区：当你使用axios.get<ProductResponse>(productUrl)时，泛型ProductResponse对应的是API返回的原始响应体（也就是res.data的类型）。从错误信息和你的代码逻辑来看，目标API实际返回的结构应该是{ code: number, data: Product[] }，你的类型定义多嵌套了一层data。

这就导致你执行res.data.data时，拿到的是整个{ code: number, data: Product[] }对象，而不是你需要的Product[]数组，自然无法赋值给类型为Array<Product>的状态变量，触发了TypeScript的类型检查错误。

解决方案

只需要修正ProductResponse的类型定义，去掉多余的外层data即可：

更新类型定义：

// 直接匹配API返回的结构，去掉外层嵌套的data
export type ProductResponse = { code: number, data: Array<Product> }

保持请求逻辑不变（此时类型已经匹配）：

const fetchProducts = (): void => {
  const productUrl = "https://gorest.co.in/public-api/products";
  axios.get<ProductResponse>(productUrl).then((res) => {
    // 现在res.data.data就是正确的Product[]类型，和状态变量类型完全匹配
    setProducts(res.data.data);
  });
};