调用useGetAuthorizationWrapper时如何修改返回data的类型为数组？

问题根源 #

你之前尝试的useGetAuthorizationWrapper<{ data: [] }>()写法错误，因为它把泛型参数指定为了包含data属性的对象类型，而非数组本身。要解决类型报错，需要针对自定义Hook的泛型定义或调用方式做调整，分两种情况处理：

情况1：可以修改useGetAuthorizationWrapper内部代码 #

既然这个Hook内部调用了react-query的useQuery，你可以给它添加泛型参数来指定返回data的类型，让Hook支持类型推导：

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

// 定义泛型Hook，T代表data的实际类型，默认值为unknown
function useGetAuthorizationWrapper<T = unknown>(
  queryKey: QueryKey,
  // queryFn返回Promise<T>，对应接口返回的数组类型
  queryFn: () => Promise<T>
) {
  // 给useQuery传入泛型T，明确接口返回数据类型
  const { data } = useQuery<T>(queryKey, queryFn);
  return { data };
}

调用时直接指定数组类型（比如string[]或自定义对象数组YourAuthItem[]）：

// 示例1：任意类型数组
const { data } = useGetAuthorizationWrapper<unknown[]>(['auth'], fetchAuthData);

// 示例2：特定类型数组（推荐，类型更安全）
interface AuthItem {
  id: string;
  permission: string;
}
const { data } = useGetAuthorizationWrapper<AuthItem[]>(['auth'], fetchAuthData);

使用时注意react-query的data可能为undefined（加载/错误状态），先做存在性判断再访问length：

if (data) {
  console.log(data.length); // 此时data已被推断为数组类型，无报错
}

情况2：无法修改useGetAuthorizationWrapper内部代码 #

如果Hook是第三方提供的，无法修改源码，可通过类型断言或类型守卫来处理：

方法1：类型断言（快速但需确保数据确实是数组）

const { data } = useGetAuthorizationWrapper() as { data: unknown[] };

// 或更具体的类型
const { data } = useGetAuthorizationWrapper() as { data: AuthItem[] };

方法2：类型守卫（更安全，运行时校验）

// 定义类型守卫函数
function isAuthArray(data: unknown): data is AuthItem[] {
  return Array.isArray(data) && data.every(item => 
    typeof item === 'object' && item !== null && 'id' in item && 'permission' in item
  );
}

const { data } = useGetAuthorizationWrapper();
if (isAuthArray(data)) {
  console.log(data.length); // 类型推导为AuthItem[]，安全访问
}

内容的提问来源于stack exchange，提问作者bhargava.prabu