TypeScript中Axios请求Header类型错误问题求解

针对你遇到的sessionStorage.getItem('accesstoken')返回string | null导致Axios headers类型不匹配的问题，有几种简洁的处理方式：

1. 转换null为undefined（推荐） #

Axios的请求头字段允许值为undefined（会自动忽略该字段），可以用空值合并运算符??把null转为undefined，完美适配类型要求：

axios.post(
  `${process.env.REACT_APP_SERVER_URL}/pick`,
  {
    festivalId: newPick.festivalId,
  },
  {
    headers: {
      accesstoken: sessionStorage.getItem('accesstoken') ?? undefined,
    },
  }
);

2. 显式标注Axios请求头类型 #

如果你需要明确声明headers的类型，可以导入Axios自带的AxiosRequestHeaders：

import type { AxiosRequestHeaders } from 'axios';

const requestHeaders: AxiosRequestHeaders = {
  accesstoken: sessionStorage.getItem('accesstoken') ?? undefined,
};

axios.post(
  `${process.env.REACT_APP_SERVER_URL}/pick`,
  { festivalId: newPick.festivalId },
  { headers: requestHeaders }
);

3. 类型断言（不推荐，仅特殊场景使用） #

如果你确定后端可以接受null或者你已经处理了null的情况，可以用类型断言跳过类型检查，但这会失去TypeScript的类型保护：

axios.post(
  `${process.env.REACT_APP_SERVER_URL}/pick`,
  {
    festivalId: newPick.festivalId,
  },
  {
    headers: {
      accesstoken: sessionStorage.getItem('accesstoken') as string | undefined,
    },
  }
);

核心原因 #

sessionStorage.getItem()的返回类型是string | null，但Axios定义的请求头值类型为string | number | boolean | undefined，不包含null。将null转为undefined是最安全的做法，既符合类型规范，又不会向服务器发送无效的null头字段。

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