React Query useQuery无匹配重载、startDateIndex缺失报错排查

报错1：类型校验提示缺少必填属性startDateIndex #

问题根因 #

你给函数入参设置了默认值= {}，但UseWeatherOptions类型定义中startDateIndex是必填字段，空对象{}完全不满足该类型的结构要求，TS静态校验时直接抛出属性缺失错误。

修复方案 #

根据业务场景二选一：

• 如果允许调用useWeather时不传任何参数：将UseWeatherOptions中的startDateIndex标记为可选，同时给解构出的startDateIndex设置业务合理的默认值
• 如果startDateIndex是调用useWeather时必须传入的参数：直接删除入参的默认值= {}即可

报错2：调用useQuery()抛出「No overload matches this call」无匹配重载错误 #

问题根因 #

从代码里的QueryConfig类型判断你用的是React Query v3版本，该版本的QueryConfig类型本身就包含queryKey、queryFn等内置配置字段，你把...config展开在入参最前面时，TS无法预判展开后的对象结构，会判定对象结构不匹配useQuery支持的任意一种传参重载，因此抛出错误。

修复方案 #

把确定的必填参数queryKey、queryFn放在入参对象前面声明，再展开自定义config，既可以让TS先确定核心参数的类型，也能支持自定义配置覆盖默认行为。

修复后可运行代码 #

export const getWeatherForecast = ({
  startDateIndex,
}: {
  startDateIndex: number;
}): Promise<IWeatherForecast[]> => {
  return axios.get(`api/WeatherForecasts?startDateIndex=${startDateIndex}`);
};

type UseWeatherOptions = {
  // 若要求调用时必须传startDateIndex，可去掉?，同时删除函数入参的= {}默认值
  startDateIndex?: number;
  config?: QueryConfig<typeof getWeatherForecast>;
};

export const useWeather = ({ startDateIndex = 0, config }: UseWeatherOptions = {}) => {
  return useQuery({
    // 核心必填参数放在前面，先固定类型
    queryKey: ['weather', startDateIndex],
    queryFn: () => getWeatherForecast({ startDateIndex }),
    // 自定义配置后展开，避免类型冲突
    ...config,
  });
};

补充：如果项目升级到React Query v4及以上版本，QueryConfig类型已被废弃，需要替换为UseQueryOptions类型，同时调整类型传参顺序即可适配。

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