TypeScript下getInitialProps配置axios headers类型不匹配问题

这个报错既不需要修改NextPageContext的官方类型定义，也不需要补充axios的类型声明，本质是Next.js服务端渲染场景下的类型兼容问题：

• Next.js的NextPageContext类型同时兼容客户端、服务端两种运行环境：客户端渲染时req值为undefined，服务端渲染时req是Node.js原生IncomingMessage类型，对应的headers属性类型为IncomingHttpHeaders
• axios请求配置中要求的headers字段类型为自带的AxiosRequestHeaders，两者在运行时结构完全兼容，但静态类型校验时TS会判定类型不匹配，进而抛出错误。

按推荐优先级排序：

• 类型断言（代码改动最小，适配单一场景）
  明确告知TS当前传入值符合axios的类型要求，适合确定运行时数据结构匹配的场景，使用前需要先从axios导入对应类型：

import type { AxiosRequestHeaders } from 'axios';

Home.getInitialProps = async ({ req }: NextPageContext) => {
  if (typeof window === "undefined") {
    const { data } = await axios.get<State>(
      "http://ingress-nginx-controller.ingress-nginx.svc.cluster.local/api/users/currentuser",
      {
        headers: req?.headers as AxiosRequestHeaders,
      }
    );
    return data;
  } 
};

• 按需提取请求头（更稳妥，避免冗余头透传）
  服务端发起请求时不需要透传客户端请求的所有头字段，只需要提取cookie、host等业务必需字段即可，从根源上规避类型不匹配问题：

Home.getInitialProps = async ({ req }: NextPageContext) => {
  if (typeof window === "undefined") {
    const { data } = await axios.get<State>(
      "http://ingress-nginx-controller.ingress-nginx.svc.cluster.local/api/users/currentuser",
      {
        headers: {
          Host: req?.headers.host,
          Cookie: req?.headers.cookie
          // 其他业务需要的头字段可按需补充
        },
      }
    );
    return data;
  } 
};

• 封装SSR专用axios实例（项目级最优解）
  如果项目中有大量服务端渲染发起请求的场景，可以单独封装一个专用axios实例，统一处理baseURL配置、请求头透传逻辑，不需要每个接口单独写类型断言或重复配置头字段。

• 不要修改NextPageContext的全局类型定义：Next官方提供的类型是准确的，随意修改全局类型会导致其他使用场景下类型校验失效，埋下隐性bug。
• 不要给axios补充冗余类型声明：axios自带的类型定义本身没有问题，强行扩展类型兼容IncomingHttpHeaders会让其他普通场景下的headers校验失去约束意义。

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