TS访问Services接口service属性返回undefined及TS2339报错

• 核心问题是接口定义存在多余嵌套，类型和实际数据结构的匹配逻辑混乱，直接导致访问路径层数错误：
  1. 你定义的Services接口中，数字索引签名返回的是长度为1的元组（外层多套了一对方括号），元组内的第一个元素才是真正的服务对象，而非索引直接返回服务对象。
  2. ServiceDataToDialog接口中allServices被定义为Array<Services>类型，也就是元素为Services实例的数组，本身多套了一层不必要的数组结构。
• 访问路径的层数匹配错误：
  • data[0].allServices?.[0]?.[0]拿到的是Services实例中索引为0对应的元组，不是服务对象本身，元组类型上不存在service属性，这就是TS报TS2339错误的直接原因。
  • 你尝试写data[0].allServices?.[0]?.[0]?.[0]?.service返回undefined，大概率是实际运行时数据的分组索引和你写的0不匹配，或者某一层数据为空。

推荐方案：修正不合理的接口定义（从根源避免嵌套混乱） #

先抽离公共的服务项类型，去掉多余的嵌套层，修复原接口索引签名和固定字段类型不兼容的问题：

// 抽离单个服务项的类型，避免重复定义
export interface ServiceItem {
  uid: number
  service: string
  description: string
  hourlyRate: number
  hours: number
  price: number
  serviceIsDisabled: boolean
  serviceIsMandatory: boolean
}

// 按section分组的服务集合：数字key对应服务项数组
export interface Services {
  [section: number]: ServiceItem[]
}

export interface ServiceDataToDialog {
  key: number
  section: number
  // 兼容固定字段的number类型和动态索引的对象类型，解决原接口类型冲突问题
  [section: number]: {
    service: string
    description: string
    hourlyRate: number
    hours: number
    price: number
    serviceIsDisabled: boolean
    serviceIsMandatory: boolean
    officialHourlyRate: number
    // 去掉多余的Array包裹，allServices本身就是分组的服务集合
    allServices: Services
  } | number
}

接口修正后，访问路径逻辑清晰，比如要获取section为0分组下第一个服务的service字段：

console.log(data[0].allServices?.[0]?.[0]?.service, 'A service')

临时方案：不修改接口，调整访问路径层数 #

如果你暂时不想调整接口定义，按照当前的接口结构，需要多取一层元组的元素才能拿到服务对象：

// 路径层级说明：
// data[0] → 取dialog传入数据中索引0对应的配置对象
// allServices?.[0] → 取allServices数组中第一个Services实例
// ?.[0] → 取该Services实例中section=0对应的元组
// ?.[0] → 取元组内存储的服务对象
// .service → 取目标字段
console.log(data[0].allServices?.[0]?.[0]?.[0]?.service, 'A service')

如果这个写法还是返回undefined，建议逐层打印返回值，确认实际数据的分组key是否为0，避免索引写错。

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