使用React useInfiniteQuery时出现“no overload matches this call”错误求助

错误信息 #

No overload matches this call.
  Overload 1 of 3, '(options: DefinedInitialDataInfiniteOptions<FetchResponse<Game>, Error, InfiniteData<FetchResponse<Game>, unknown>, QueryKey, unknown>, queryClient?: QueryClient | undefined): DefinedUseInfiniteQueryResult<...>', gave the following error.
    Type 'undefined' is not assignable to type '(InfiniteData<FetchResponse<Game>, unknown> | InitialDataFunction<InfiniteData<FetchResponse<Game>, unknown>> | undefined) & (InfiniteData<...> | (() => InfiniteData<...>))'.
  Overload 2 of 3, '(options: UndefinedInitialDataInfiniteOptions<FetchResponse<Game>, Error, InfiniteData<FetchResponse<Game>, unknown>, QueryKey, unknown>, queryClient?: QueryClient | undefined): UseInfiniteQueryResult<...>', gave the following error.
    Argument of type '{ queryKey: (string | GameQuery)[]; queryFn: ({ pageParam }: { queryKey: QueryKey; signal: AbortSignal; pageParam: unknown; direction: FetchDirection; meta: Record<...> | undefined; }) => Promise<...>; initialData: undefined; getNextPageParam: (lastPage: FetchResponse<...>, allPages: FetchResponse<...>[]) => number ...' is not assignable to parameter of type 'UndefinedInitialDataInfiniteOptions<FetchResponse<Game>, Error, InfiniteData<FetchResponse<Game>, unknown>, QueryKey, unknown>'.
     
  Overload 3 of 3, '(options: UseInfiniteQueryOptions<FetchResponse<Game>, Error, InfiniteData<FetchResponse<Game>, unknown>, FetchResponse<Game>, QueryKey, unknown>, queryClient?: QueryClient | undefined): UseInfiniteQueryResult<...>', gave the following error.
    Argument of type '{ queryKey: (string | GameQuery)[]; queryFn: ({ pageParam }: { queryKey: QueryKey; signal: AbortSignal; pageParam: unknown; direction: FetchDirection; meta: Record<...> | undefined; }) => Promise<...>; initialData: undefined; getNextPageParam: (lastPage: FetchResponse<...>, allPages: FetchResponse<...>[]) => number ...' is not assignable to parameter of type 'UseInfiniteQueryOptions<FetchResponse<Game>, Error, InfiniteData<FetchResponse<Game>, unknown>, FetchResponse<Game>, QueryKey, unknown>'.
      Property 'initialPageParam' is missing in type '{ queryKey: (string | GameQuery)[]; queryFn: ({ pageParam }: { queryKey: QueryKey; signal: AbortSignal; pageParam: unknown; direction: FetchDirection; meta: Record<...> | undefined; }) => Promise<...>; initialData: undefined; getNextPageParam: (lastPage: FetchResponse<...>, allPages: FetchResponse<...>[]) => number ...' but required in type 'UseInfiniteQueryOptions<FetchResponse<Game>, Error, InfiniteData<FetchResponse<Game>, unknown>, FetchResponse<Game>, QueryKey, unknown>'.ts(2769)
hydration-Bnn1iiSg.d.ts(581, 5): The expected type comes from property 'initialData' which is declared here on type 'DefinedInitialDataInfiniteOptions<FetchResponse<Game>, Error, InfiniteData<FetchResponse<Game>, unknown>, QueryKey, unknown>'
hydration-Bnn1iiSg.d.ts(602, 5): 'initialPageParam' is declared here.
hydration-Bnn1iiSg.d.ts(602, 5): 'initialPageParam' is declared here.

相关代码 #

import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
import { GameQuery } from "../App";
import ApiClient, { FetchResponse }  from "../services/api-client";
import { Platform } from "./usePlatforms";


const apiClient= new ApiClient<Game>("/games")

export interface Game {
  id: number;
  name: string;
  background_image: string;
  parent_platforms: { platform: Platform }[];
  metacritic: number;
  rating_top: number;
}

const useGames = (gameQuery: GameQuery) =>
  useInfiniteQuery<FetchResponse<Game>,Error>({
    queryKey:["games" ,gameQuery],
    queryFn:({pageParam=1})=>
      apiClient.getAll({
      params: {
        genres: gameQuery.genre?.id,
        parent_platforms: gameQuery.platform?.id,
        ordering: gameQuery.sortOrder,
        search: gameQuery.searchText,
        page:pageParam
      },
    },),
    initialData:undefined,
    getNextPageParam:(lastPage,allPages)=>{
      return lastPage.next? allPages.length+1 : undefined
    }
  })
  
export default useGames;

修复方案 #

1. 移除initialData: undefined #

显式设置initialData: undefined会触发TypeScript匹配要求初始数据非空的重载，直接删除该属性，让React Query自动适配无初始数据的类型定义。

2. 显式添加initialPageParam #

尽管你在queryFn中给pageParam设置了默认值1，但TypeScript的类型检查要求在无初始数据的无限查询配置中必须显式声明initialPageParam。在配置对象中添加该属性即可满足类型要求。

修复后的代码 #

import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
import { GameQuery } from "../App";
import ApiClient, { FetchResponse }  from "../services/api-client";
import { Platform } from "./usePlatforms";


const apiClient= new ApiClient<Game>("/games")

export interface Game {
  id: number;
  name: string;
  background_image: string;
  parent_platforms: { platform: Platform }[];
  metacritic: number;
  rating_top: number;
}

const useGames = (gameQuery: GameQuery) =>
  useInfiniteQuery<FetchResponse<Game>,Error>({
    queryKey:["games" ,gameQuery],
    queryFn:({pageParam})=>
      apiClient.getAll({
      params: {
        genres: gameQuery.genre?.id,
        parent_platforms: gameQuery.platform?.id,
        ordering: gameQuery.sortOrder,
        search: gameQuery.searchText,
        page:pageParam
      },
    },),
    initialPageParam: 1,
    getNextPageParam:(lastPage,allPages)=>{
      return lastPage.next? allPages.length+1 : undefined
    }
  })
  
export default useGames;

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