无法从Axios API响应中获取嵌套值的技术问题

我能够获取到response.data对象，但尝试读取其内部值时输出结果为undefined，遇到的错误如下：

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'permissions')
at ConfigService.loadConfigData

我的代码：

import axios from 'axios';
import { injectable } from 'inversify';
import "reflect-metadata";

interface Configuration {
  EnableForgetPassword?: string;
}

interface Data {
  configuration?: Configuration[];
  permissions?: string[];
}

interface ConfigData {
  data: Data;
 
}

@injectable()
class ConfigService {
  private _config: ConfigData = {
    data: {
      configuration: [{ EnableForgetPassword: "False" }],
      permissions: []
    },
    
  }
  private _permissions: string[] = []
  private _configuration: any = {};

  async loadConfigData(): Promise<void> {
    
      const response = await axios.get<ConfigData>('https://run.mocky.io/v3/74946531-e762-4f42-990d-2e73b73f9176');
      const config = response.data; 
      
      console.log(config);
      console.log(config.data.permissions); // 抛出错误
  
}
}

我预期的响应JSON：

{ 
  "data": {
    "configuration": [{"EnableForgetPassword":"True"}],
    "permissions": ["Global.Settings","User.Create"]
  }
}

核心问题是你定义的ConfigData接口和接口实际返回的结构不匹配。你提供的mock接口实际返回的是直接包含configuration和permissions的对象，也就是符合你定义的Data接口，而非外层包裹data属性的ConfigData结构。

当你执行axios.get<ConfigData>时，response.data的实际类型是Data，而非ConfigData。此时config对象本身就拥有permissions属性，不需要再通过config.data去读取。

你可以通过以下两种方式解决：

• 调整请求类型匹配实际返回结构：
  去掉多余的ConfigData接口，直接用Data作为axios请求的返回类型：

  async loadConfigData(): Promise<void> {
    // 修改泛型为Data
    const response = await axios.get<Data>('https://run.mocky.io/v3/74946531-e762-4f42-990d-2e73b73f9176');
    const config = response.data; 
    
    console.log(config);
    console.log(config.permissions); // 正常读取
  }
  

• 临时调整读取方式（若需保留ConfigData结构）：
  如果后续后端会调整返回格式为ConfigData结构，可临时直接读取config的属性：

  console.log(config.permissions);
  

建议通过浏览器开发者工具的Network面板查看接口实际返回的JSON结构，确认数据层级是否与预期一致。

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