使用React Query useQueries钩子时遇TypeScript错误：类型{}无data属性

问题根源 #

你用了UseQueryResult<unknown, unknown>，TypeScript完全不知道item.data的结构，自然会报错说找不到data属性。解决核心是给返回数据明确类型定义。

具体修复步骤 #

1. 定义返回数据的类型接口
   根据你接口返回的嵌套data结构，先定义对应的TypeScript接口（可根据实际返回字段调整）：

   // 定义单个任务的结构
   interface Task {
     id: string;
     title: string;
     status: string;
     // 其他任务字段...
   }
   
   // 接口返回的整体结构：外层data包裹内层data
   interface TaskResponse {
     data: Task[];
   }
   

2. 给请求函数或查询指定类型
   两种方式选其一即可：

   • 方式一：给封装的axios请求加泛型（推荐，复用性更强）

     // 修改你的customAxiosRequestForGet，让它支持泛型返回
     const customAxiosRequestForGet = async <T>(url: string, params: Record<string, any>): Promise<T> => {
       const response = await axios.get(url, { params });
       return response.data;
     };
     

   • 方式二：直接在queryFn里断言返回类型

     queryFn: () => 
       customAxiosRequestForGet('/task', { status, projectName: active_project }) as Promise<TaskResponse>,
     

3. 调整useQueries和map的类型声明
   修改代码里的类型标注，让TypeScript识别item.data的结构：

   const useGetTaskAccordingToStatus = () => {
     const { active_project } = useSelector(projectDataInStore);
     const { total_status } = useSelector(statusDataInStore);
   
     const userQueries = useQueries({
       queries: total_status?.map((status: string) => ({
         queryKey: [status, active_project],
         queryFn: () =>
           // 这里用泛型指定返回类型为TaskResponse（方式一的写法）
           customAxiosRequestForGet<TaskResponse>('/task', {
             status,
             projectName: active_project,
           }),
       })) || [], // 加空数组兜底，避免total_status为undefined时的问题
     });
   
     const data = useMemo(
       () =>
         userQueries.map((item: UseQueryResult<TaskResponse, unknown>) => {
           // 现在TypeScript明确知道item.data是TaskResponse类型，能识别item.data.data
           return item.data?.data;
         }),
       [userQueries],
     );
   
     return { data };
   };
   

额外提示 #

• 确保你定义的TaskResponse和接口实际返回的结构完全匹配，否则还是会出现类型错误。
• 如果total_status可能为undefined，加|| []兜底可以避免map调用时的报错。

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