TypeScript禁止访问接口响应data属性问题求助

一、success为false时无法访问responseData.data的问题 #

当前你的ApiResponseError接口没有定义data字段，但业务逻辑需要在success为false时访问该属性，TypeScript的联合类型检查会限制你访问仅部分分支存在的属性，所以触发报错。

解决办法 #

1. 修改类型定义（推荐）

如果后端接口在success为false时确实会返回data字段，直接给ApiResponseError添加对应的data字段：

interface ApiResponseError {
    success: false;
    message: string;
    error_code: string;
    valid: boolean;
    data?: MessageModels; // 根据后端实际返回情况设为可选或必填
}

修改后TypeScript会识别到所有分支都可能有data属性，就能正常访问了。

2. 临时用类型断言

如果暂时无法修改类型定义，或者不确定后端返回，可以用类型断言跳过检查：

if (!responseData.success || (responseData as ApiResponseSuccess<MessageModels>).data.data.total_messaged === 0) {
    const targetMessage = (responseData as ApiResponseSuccess<MessageModels>).data.data.message;
    openToast(i18n.t(targetMessage), 'is-danger');
}

注意：这种方式会绕过TypeScript的类型校验，有潜在风险，仅作为临时方案。

二、为什么需要responseData.data.data.message #

这是由你的类型嵌套层级导致的：

• responseData是ApiResponse<MessageModels>类型，当success为true时，它的data属性对应MessageModels类型
• 而MessageModels自身又定义了data字段（类型为MessageData）
• 所以要获取MessageData里的message，就需要两层data访问：responseData.data.data.message

如果觉得嵌套冗余，可以：

1. 检查后端接口的返回结构是否有优化空间，比如直接返回MessageData作为顶层data
2. 调整类型定义，将请求封装的泛型改为ApiResponse<MessageData>：

export const sendMessageToAllApplicants = makeCall((axios, finalObject) => {
    return axios.post<ApiResponse<MessageData>>(`/messages-models`, finalObject);
});

这样就能简化为responseData.data.message，前提是后端返回结构匹配。

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