如何为映射后的React Query请求正确添加类型？

问题根源 #

原代码的类型定义存在两处核心问题：

• 定义的interface data中HeroData: []是空数组类型，TypeScript无法推断数组元素的具体结构；
• fetchSuperHeroes函数的返回类型错误，axios.get实际返回的是包含data属性的AxiosResponse对象，而非直接的自定义数据类型。

具体修正步骤 #

1. 明确单个英雄的类型结构
   根据API返回的英雄数据结构，定义对应的TypeScript接口：

   interface Hero {
     id: number;
     name: string;
     // 可添加其他字段，如superPower等，匹配API实际返回
   }
   

2. 修正fetch函数的类型与返回值
   推荐直接返回响应中的数据（减少后续层级访问），或者正确指定AxiosResponse类型：

   // 推荐方式：直接返回英雄数组
   function fetchSuperHeroes(): Promise<Hero[]> {
     return axios.get("http://localhost:4000/superheroes").then(res => res.data);
   }
   
   // 备选方式：保留AxiosResponse类型
   function fetchSuperHeroes(): Promise<AxiosResponse<Hero[]>> {
     return axios.get("http://localhost:4000/superheroes");
   }
   

3. 为useQuery指定泛型（可选但更清晰）
   显式指定useQuery的返回数据类型，让TypeScript准确推断：

   // 对应推荐方式（直接返回Hero数组）
   const { isLoading, data, error } = useQuery<Hero[]>({
     queryKey: "super-heroes",
     queryFn: fetchSuperHeroes,
   });
   
   // 对应备选方式（返回AxiosResponse）
   const { isLoading, data, error } = useQuery<AxiosResponse<Hero[]>>({
     queryKey: "super-heroes",
     queryFn: fetchSuperHeroes,
   });
   

4. 调整渲染逻辑中的数据访问
   根据fetch函数的返回方式，修正数组的访问路径：

   • 推荐方式下，直接遍历data：

     {data?.map((hero) => {
       return <div key={hero.id}>{hero.name}</div>;
     })}
     

   • 备选方式下，需要访问data?.data：

     {data?.data.map((hero) => {
       return <div key={hero.id}>{hero.name}</div>;
     })}
     

完整修正代码示例 #

import { useQuery } from "react-query";
import axios from "axios";

// 定义单个英雄的类型
interface Hero {
  id: number;
  name: string;
}

// 直接返回英雄数组的fetch函数
function fetchSuperHeroes(): Promise<Hero[]> {
  return axios.get("http://localhost:4000/superheroes").then(res => res.data);
}

function RQSuperHeroesPage() {
  // 显式指定泛型，确保类型推断准确
  const { isLoading, data, error } = useQuery<Hero[]>({
    queryKey: "super-heroes",
    queryFn: fetchSuperHeroes,
  });

  if (isLoading) {
    return <h2>Loading...</h2>;
  }

  if (error instanceof Error) {
    return <h2>{error.message}</h2>;
  }

  return (
    <>
      <h2>RQ Super Heroes Page</h2>
      {data?.map((hero) => {
        return <div key={hero.id}>{hero.name}</div>;
      })}
    </>
  );
}

export default RQSuperHeroesPage;

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