从Axios响应头获取文件名时遭遇TypeScript报错TS(2723)

问题分析 #

你遇到的错误是因为TypeScript无法确定response.headers一定包含get方法，或者headers本身可能为null/undefined，所以调用get时触发了类型检查错误。之前的代码只处理了response和headers的可选链，但没考虑get方法可能不存在的情况。

解决方案 #

给get方法也加上可选链，同时用??（空值合并运算符）替代||，避免误判空字符串等合法假值：

const contentDisposition = response?.headers?.get?.('content-disposition');
const filename = contentDisposition?.split('"')[1] ?? 'file';

补充方案（类型断言） #

如果你能确定response.headers一定是Axios的AxiosResponseHeaders类型（包含get方法），可以用类型断言跳过类型检查：

import { AxiosResponseHeaders } from 'axios';

const contentDisposition = (response.headers as AxiosResponseHeaders).get('content-disposition');
const filename = contentDisposition?.split('"')[1] ?? 'file';

额外说明 #

• ?.get?的作用是：当headers存在且包含get方法时才调用，否则返回undefined
• ??只在左侧值为null或undefined时才返回右侧默认值，比||更严谨（||会把空字符串、0等假值都替换成默认值）

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