TypeScript中useQuery泛型any替换类型及TQueryFnData报错问题

问题说明 #

你现在用any作为useQuery的第一个泛型参数，等于放弃了TypeScript的类型检查优势。至于TQueryFnData找不到的问题，是因为它只是React Query内部类型定义里的泛型占位符，不是给开发者直接调用的类型，自然会报错。

正确写法示例 #

直接用你已经定义好的Users接口作为useQuery的第一个泛型参数（对应查询返回的数据类型），第二个参数填错误类型Error即可。另外注意userID可能为undefined，加个enabled选项避免发送无效请求：

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';
import { Users } from './你的接口文件路径'; // 记得引入Users接口

export const useFetchUser = (userID: string | undefined) => {
    return useQuery<Users, Error>(
        ['fetchUser', userID], // 查询键
        () => axios.get(`https://jsonplaceholder.typicode.com/users/${userID}`)
            .then(response => response.data),
        {
            enabled: !!userID, // 仅当userID存在时执行查询
        }
    );
};

为啥TQueryFnData会报错 #

React Query的useQuery类型签名里的TQueryFnData只是个占位符，它的类型定义大致如下：

function useQuery<
  TQueryFnData = unknown,
  TError = unknown,
  TData = TQueryFnData,
  TQueryKey extends QueryKey = QueryKey
>(
  queryKey: TQueryKey,
  queryFn: QueryFunction<TQueryFnData, TQueryKey>,
  options?: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>
): UseQueryResult<TData, TError>;

你需要做的是把TQueryFnData替换成实际的返回类型（比如你的Users），而不是直接把TQueryFnData当作类型来使用。

额外补充 #

如果需要对返回的数据做结构转换，还可以用第三个泛型参数定义转换后的类型：

// 比如只提取用户的姓名和邮箱
type UserPreview = Pick<Users, 'name' | 'email'>;

export const useFetchUser = (userID: string | undefined) => {
    return useQuery<Users, Error, UserPreview>(
        ['fetchUser', userID],
        () => axios.get(`https://jsonplaceholder.typicode.com/users/${userID}`).then(res => res.data),
        {
            enabled: !!userID,
            select: (data) => ({ name: data.name, email: data.email }) // 转换返回数据结构
        }
    );
};

另外要保证Users和关联的Address、Geo、Company接口都完整定义，这样TypeScript才能正常进行类型校验。

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