TypeScript中useQuery必填变量依赖查询结果的类型报错问题

嘿，这个React Query结合TypeScript的类型问题我太熟了！给你几个实用的解决思路，你可以根据自己的场景选：

方法一：非空断言（简单直接，需确保逻辑安全） #

既然你已经通过skip: !myVariable确保了只有变量存在时才执行第二个查询，那可以用非空断言!明确告诉TypeScript：这个变量此时肯定是number类型，不会是undefined：

const { data: secondQueryData } = useQuery(GET_MY_SECOND_QUERY_DATA, { 
  variables: { secondVariable: myVariable! }, // 非空断言排除undefined类型
  skip: !myVariable 
})

⚠️ 注意：只有当你能100%保证skip的判断逻辑和变量的存在性完全一致时才用这个方法，不然可能会触发运行时错误。

方法二：条件拆分逻辑（类型安全，可读性强） #

把第二个查询的创建逻辑放在if判断里，让TypeScript自动推断变量类型：

let secondQueryData: typeof secondQueryData | undefined;

if (myVariable) {
  // 这里TypeScript会自动推断myVariable是number类型
  const { data } = useQuery(GET_MY_SECOND_QUERY_DATA, { 
    variables: { secondVariable: myVariable } 
  });
  secondQueryData = data;
}

这种方式完全符合TypeScript的类型检查规则，不会有报错，逻辑也更直观——变量存在才发起查询，不存在就跳过。

方法三：自定义类型安全的useQuery（进阶方案） #

如果你的项目里经常遇到这种场景，可以封装一个自定义的useQuery，强制要求当skip为false时，变量必须是必填的非undefined类型：

import { useQuery as useTanstackQuery, QueryKey, UseQueryOptions } from '@tanstack/react-query';

function useQuery<TQueryFnData, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(
  queryKey: TQueryKey,
  options: Omit<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'variables'> & {
    variables: NonNullable<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>['variables']>;
    skip?: boolean;
  }
) {
  return useTanstackQuery(queryKey, {
    ...options,
    variables: options.skip ? undefined : options.variables,
  });
}

之后用这个自定义的useQuery，只要skip为false，TypeScript就会强制要求variables是必填的合法类型，从根源上避免这类报错。

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