TanStack Query中useQuery的类型收窄为何不生效？

你遇到的问题是：使用TanStack Query的useQuery时，即便判断了isSuccess为true，data的类型依然是number | undefined，无法自动收窄为number。

问题原因 #

TypeScript无法将独立的isSuccess变量和data的类型做关联——这两个是返回对象中分开的属性，并非互斥的联合类型成员，所以编译器没法推断当isSuccess为true时，data一定存在有效值。

解决办法 #

• 直接判断data的存在性（推荐）
  既然isSuccess为true时data必然有值，反过来只要data存在，就说明请求已成功。直接判断data本身，TypeScript能正确收窄类型：

  const { data, isSuccess } = useQuery(["test"], () => Promise.resolve(5));
  
  if (data) {
    // 此处data类型自动收窄为number
    data;  
  }
  

• 结合isSuccess使用非空断言（谨慎使用）
  如果你一定要基于isSuccess判断，可以用非空断言!强制告诉TypeScriptdata此时非空，但这种方式跳过了类型检查，若后续逻辑变动可能引发运行时错误：

  const { data, isSuccess } = useQuery(["test"], () => Promise.resolve(5));
  
  if (isSuccess) {
    // 非空断言后，safeData类型为number
    const safeData = data!;
  }
  

• 自定义类型守卫（灵活场景）
  写一个自定义类型守卫函数，将isSuccess和data的类型做关联，让TypeScript能正确识别：

  function hasQueryData<T>(result: { isSuccess: boolean; data: T | undefined }): result is { isSuccess: true; data: T } {
    return result.isSuccess && result.data !== undefined;
  }
  
  // 使用示例
  const queryResult = useQuery(["test"], () => Promise.resolve(5));
  if (hasQueryData(queryResult)) {
    // 此处queryResult.data类型为number
    queryResult.data;
  }
  

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