React迁TypeScript：useQuery封装钩子的data类型未知问题

问题核心是你封装的useAlertsList钩子没有给useQuery传递明确的泛型类型参数，导致TypeScript无法推断返回数据的类型，最终data被判定为unknown。直接调用useQuery时能正常识别类型，是因为组件中调用时可能隐式传递了类型，或者接口请求函数本身的类型被正确推断了。

错误封装示例（导致data为unknown） #

import { useQuery } from 'react-query';
import { fetchAlertsList } from '../api';

export const useAlertsList = (payload: AlertsPayload) => {
  // 未指定泛型，TypeScript无法推断返回数据类型
  return useQuery(['alerts', payload], () => fetchAlertsList(payload));
};

修复方案：显式指定泛型参数 #

既然你已经在types.d.ts中声明了AlertsResponse，只需要在封装时给useQuery显式指定成功数据的类型即可，错误类型可选（默认是Error）：

import { useQuery } from 'react-query';
import { fetchAlertsList } from '../api';
import type { AlertsPayload, AlertsResponse } from './types.d';

export const useAlertsList = (payload: AlertsPayload) => {
  // 显式指定useQuery的泛型：<成功数据类型, 错误类型>
  return useQuery<AlertsResponse, Error>(
    ['alerts', payload], 
    () => fetchAlertsList(payload)
  );
};

这样在组件中调用useAlertsList时，data的类型会被正确推断为AlertsResponse | undefined，不再出现unknown的编译错误。

通用封装方案（如需复用不同接口） #

如果需要让封装的钩子支持更多业务场景，可以让钩子本身接受泛型参数，适配不同的请求返回类型：

import { useQuery, QueryKey } from 'react-query';

// 通用查询钩子
export const useGenericQuery = <TData = unknown, TError = Error>(
  queryKey: QueryKey,
  fetcher: () => Promise<TData>
) => {
  return useQuery<TData, TError>(queryKey, fetcher);
};

// 针对告警列表的具体封装
export const useAlertsList = (payload: AlertsPayload) => {
  return useGenericQuery<AlertsResponse>(
    ['alerts', payload], 
    () => fetchAlertsList(payload)
  );
};

额外注意事项 #

确保types.d.ts中的类型是导出的，否则封装钩子无法正确引入：

// types.d.ts
export interface AlertsPayload {
  // 你的参数结构示例
  page: number;
  limit: number;
}

export interface AlertsResponse {
  // 你的响应结构示例
  list: Array<{ id: string; message: string }>;
  total: number;
}

这种修改方式完全保留了钩子的复用性，不需要改动组件中的调用代码，只需要调整封装层的类型声明即可。

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