如何解决使用useQuery时出现的TS类型不匹配报错问题？

你遇到的类型报错和传入async函数无关，问题出在useQuery的泛型参数定义和实际查询函数返回值不匹配：

• 你给useQuery传入的第一个泛型参数是AddSkuSelectedSku['totalPrice']，该类型对应的是string类型
• 但你的查询函数实际返回的是{ totalPrice: string }的对象结构，两者类型完全不一致，所以触发了类型不匹配报错

根据你期望的返回结构，把useQuery的第一个泛型参数改成对应的对象类型即可：

// 方案1：直接定义期望的返回结构作为泛型
return useQuery<{ totalPrice: string }, Error>(
  [queryKey, item],
  async () => {
    const { data } = await product.price({ item })
    return {
      totalPrice: data?.price || ''
    }
  }, mergedOptions
);

// 方案2：如果AddSkuSelectedSku本身就是包含totalPrice字段的对象类型，直接传整个类型即可
return useQuery<AddSkuSelectedSku, Error>(
  // 其余参数保持不变
)

React Query的查询函数本身就支持async/await写法，异步返回的Promise会被自动处理，不需要额外调整类型定义，只要保证泛型声明的返回值和查询函数return的结构一致即可。

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