React-Redux+TypeScript遇TS2339错误：如何获取result.data.message.AT？

问题根源是你定义baseQueryWithReauth时，BaseQueryFn的第二个泛型参数设为了unknown，TypeScript无法推断result.data的具体结构，因此访问message属性时触发类型错误。以下是几种可行的解决办法：

方案1：定义响应类型并全局指定 #

先给后端返回的成功数据定义明确的TypeScript类型：

// 匹配后端返回的结构
interface ApiSuccessResponse {
  success: boolean;
  message: {
    AT: string;
  };
}

然后修改BaseQueryFn的泛型，把原本的unknown替换成我们定义的类型：

const baseQueryWithReauth: BaseQueryFn<
  string | FetchArgs,
  ApiSuccessResponse, // 替换这里的unknown
  FetchBaseQueryError
> = async (args, api, extraOptions) => {
  const result = await baseQuery(args, api, extraOptions);
  // 现在TS能正确识别data的结构，不会再报错
  console.log(result?.data?.message.AT);
  return result;
};

方案2：临时用类型断言 #

如果只是单个地方需要访问，不想修改全局泛型，可以用类型断言临时指定：

console.log((result?.data as ApiSuccessResponse)?.message.AT);

注意：这种方式要确保当前请求的返回结构确实符合ApiSuccessResponse，否则可能出现运行时错误。

方案3：用类型守卫做安全检查 #

如果后端可能返回不同结构的响应，建议加个类型守卫做安全校验：

// 定义类型守卫函数
function isApiSuccessResponse(data: unknown): data is ApiSuccessResponse {
  return (
    typeof data === 'object' &&
    data !== null &&
    'success' in data &&
    typeof (data as { success: unknown }).success === 'boolean' &&
    'message' in data &&
    typeof (data as { message: unknown }).message === 'object' &&
    (data as { message: unknown }).message !== null &&
    'AT' in (data as { message: unknown }).message
  );
}

// 使用时先校验类型
if (result?.data && isApiSuccessResponse(result.data)) {
  console.log(result.data.message.AT);
}

内容的提问来源于stack exchange，提问作者yashpal 9rx