TypeScript访问联合类型对象中可能不存在的属性报错如何解决？

报错原因 #

你拿到的接口返回值是{data:string} | {error:unknown}联合类型，只有成功分支的对象存在data属性，错误分支不存在该属性，TypeScript 不允许直接访问联合类型上非共有的属性，因此抛出提示。

修复方案 #

• 方案1：类型窄化判断（最推荐）
  无需修改原有axiosBaseQuery定义，仅需在使用返回值前做属性存在性判断，TypeScript会自动识别当前分支的类型：

const response = await yourApiCall();

if ("data" in response) {
  // 该分支下TS自动识别response为{data: string}类型，可正常访问data
  console.log(response.data);
} else {
  // 该分支下TS自动识别response为{error: unknown}类型，可正常访问error
  console.log(response.error);
}

• 方案2：明确BaseQuery泛型类型
  你原有代码中BaseQueryFn的后两个泛型参数都填了unknown，导致返回类型推导模糊，可按业务实际的返回格式明确定义泛型：

// 先定义业务通用的错误返回结构
type BaseQueryErrorType = {
  status?: number;
  data?: unknown;
};

const axiosBaseQuery: BaseQueryFn<
  {
    url: string;
    method: "get" | "put" | "post" | "delete";
    data?: AxiosRequestConfig["data"];
  },
  string, // 第二个泛型为成功时返回的data类型，可按实际业务调整
  BaseQueryErrorType // 第三个泛型为错误时返回的error类型
> = async (args, api, extraOptions) => {
  try {
    const axiosInstance = initializeAxios(api.getState() as RootState);
    const result = await axiosInstance[args.method]("api/v0/" + args.url, args.data);
    return { data: result.data };
  } catch (axiosError) {
    const err = axiosError as AxiosError;
    return {
      error: { status: err.response?.status, data: err.response?.data }
    };
  }
};

修改后后续所有基于该baseQuery的接口返回值都会自动携带明确类型，配合方案1的窄化判断使用体验更好。

• 方案3：类型断言（仅临时调试使用，不推荐）
  如果你确认当前场景接口一定会返回成功，可强制指定类型跳过TS校验：

const data = (response as { data: string }).data;

该方式会跳过类型校验，可能引入运行时异常，不建议在生产代码中长期使用。

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