如何修复useInfiniteQuery中QueryFn返回值的TypeScript类型错误

问题的核心是你定义的接口返回类型与实际后端响应结构不匹配：后端返回的应该是包含数据列表和分页标识的对象，而非单纯的Data[]数组。以下是具体修复步骤：

1. 定义正确的分页响应类型
   先明确后端返回的结构，创建对应的TypeScript接口：

   // 假设你的单条数据类型为Data，定义分页响应的完整结构
   interface DataPageResponse {
     data: Data[];       // 分页返回的数据列表
     previousId: number | null; // 上一页标识（无则为null）
     nextId: number | null;     // 下一页标识（无则为null）
   }
   

2. 修正数据获取函数的类型声明
   将axios.get的泛型改为刚定义的DataPageResponse，确保返回值类型与实际响应一致：

   export const getAllData = async (page: number) => {
     return (await axios.get<DataPageResponse>(`data?pageSize=15&pageNumber=${page}`)).data;
   };
   

3. 修正useInfiniteQuery的分页逻辑
   原Hook中queryFn固定使用外部传入的page参数，会导致翻页时无法正确获取新页码，需改为接收useInfiniteQuery提供的pageParam参数：

   const useGetData = () => {
     return useInfiniteQuery({
       queryKey: ["data"],
       // 使用pageParam作为请求页码，默认值设为1
       queryFn: ({ pageParam = 1 }) => getAllData(pageParam),
       getPreviousPageParam: (firstPage) => firstPage.previousId ?? undefined,
       getNextPageParam: (lastPage) => lastPage.nextId ?? undefined,
     });
   };
   

完成以上修改后，TypeScript会自动推断getPreviousPageParam和getNextPageParam中的firstPage、lastPage为DataPageResponse类型，自然能正确访问previousId和nextId属性，类型错误即可解决。

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