React+TypeScript项目使用axios请求拦截器报TS2532错误如何解决

错误根因 #

AxiosRequestConfig 类型定义中 headers 是可选属性，可能为 undefined，TypeScript 不允许直接对可能为 undefined 的对象的子属性赋值，因此抛出 TS2532 错误。

修复方案 #

修改 api.ts 中的请求拦截器逻辑，先为 config.headers 兜底默认值，再进行赋值即可：

import axios, { AxiosRequestHeaders } from "axios";
import { getUserLocalStorage } from "../context/AuthProvider/util";

export const Api = axios.create({
  baseURL: "http://localhost:8000/",
});

Api.interceptors.request.use(
  (config) => {
    const user = getUserLocalStorage();
    // 兜底headers为空对象，避免undefined报错
    config.headers = config.headers ?? {} as AxiosRequestHeaders;
    if (user?.token) {
      // 注意：标准JWT认证一般需要在token前加Bearer前缀，后端有特殊约定除外
      config.headers.Authorization = `Bearer ${user.token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
)

其他可选方案 #

如果不想做兜底判断，也可以直接使用类型断言跳过校验（不推荐优先使用，适合明确headers一定存在的场景）：

(config.headers as AxiosRequestHeaders).Authorization = user?.token;

内容的提问来源于stack exchange，提问作者Antonio José