TypeScript项目使用react-query定义interface后无法访问返回数据

修复方案 #

你遇到的是接口返回结构和你定义的业务类型不匹配的问题，按照以下步骤修改即可：

1. 先定义通用响应基础类型，适配所有同结构的后端接口

interface IBaseRes<T = unknown> {
  code: number;
  data: T;
  message: string;
}

2. 调整自定义hook的类型定义，有两种可选方案：

• 方案A：请求层直接解包返回业务数据（项目中更常用，避免组件里重复取内层data）
  修改你的请求方法，请求成功后直接返回接口响应里的data字段：

// 请求函数
const getHomeData = async (): Promise<IHomeData> => {
  const response = await axios.get('/你的接口路径');
  return response.data.data;
}

// 自定义react-query hook
const useHomeData = () => {
  return useQuery<IHomeData>(['homeData'], getHomeData);
}

// 组件内使用就可以直接访问对应字段
const { data } = useHomeData();
console.log(data?.slides)

• 方案B：保留完整响应结构，类型嵌套
  如果你需要在组件内用到code、message等外层字段，直接给useQuery的泛型套上通用响应类型即可：

const useHomeData = () => {
  return useQuery<IBaseRes<IHomeData>>(['homeData'], getHomeData);
}

// 组件内访问业务数据需要多取一层data
const { data } = useHomeData();
console.log(data?.data?.slides)

3. 补充注意：react-query返回的data在请求未完成/请求失败时默认是undefined，访问字段前要加可选链?.，或者先做非空判断再访问，避免运行时报错。

内容的提问来源于stack exchange，提问作者Jesper van den Munckhof