如何为useQueries返回的myData与result指定正确TypeScript类型？

首先，我们可以利用React Query提供的QueryObserverResult泛型类型，结合你已定义的IMyData类型，一步步修正类型标注：

1. 修正useMyList Hook的类型 #

先确保hook返回正确的类型，同时适配新版React Query的useQueries调用格式（需传入包含queries字段的对象）：

import { useQueries, QueryObserverResult } from '@tanstack/react-query';

// 假设这是你已定义的业务数据类型
interface IMyData {
  // 示例字段，替换为你的实际字段
  id: number;
  content: string;
}

// 确保myQueryFn的返回类型为Promise<IMyData>
const myQueryFn = async (): Promise<IMyData> => {
  // 你的请求逻辑
  const response = await fetch('/your-api-path');
  return response.json();
};

const useMyList = () => {
  const allQueries = myList.map(() => ({
    queryKey: ['myquerykey'],
    queryFn: myQueryFn
  }));

  // 显式标注返回类型，让TS明确这是IMyData类型的查询结果数组
  return useQueries({ queries: allQueries }) as QueryObserverResult<IMyData, Error>[];
};

2. 组件中的类型标注 #

此时组件内的myData无需用any，TS会自动推导类型，也可以显式标注增强可读性：

// 组件内使用，TS自动推导myData为QueryObserverResult<IMyData, Error>[]
const myData = useMyList();

// 可选：显式标注类型（hook已返回正确类型，此步骤非必须）
// const myData: QueryObserverResult<IMyData, Error>[] = useMyList();

// result的类型会自动推导为QueryObserverResult<IMyData, Error>，无需写any
const allQueriesSuccess: boolean = myData.every((result) => result.isSuccess);

// 访问data字段时，TS会自动做类型守卫
myData.forEach(result => {
  if (result.isSuccess) {
    // 此处result.data的类型为IMyData
    console.log(result.data.id);
  }
});

关键说明 #

• QueryObserverResult<TData, TError>是React Query的核心泛型类型：
  • TData填入你的业务数据类型IMyData
  • TError填入错误类型，通常用内置的Error即可，也可自定义错误类型
• 必须保证myQueryFn的返回类型为Promise<IMyData>，这样TS才能完整关联整个查询链路的类型
• 查询未完成或失败时，result.data为undefined，TS会自动识别这个状态，避免类型错误

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