Typescript扁平化嵌套IRule对象：提取Phrase字段遇未定义报错

我定义了IRule接口，需要编写函数扁平化嵌套对象，将phrases数组的首个元素作为phrase字段提取至顶层对象。但运行代码时出现错误：'item.ruleCustomFields.CustomFields is undefined'，求解决方法。

接口定义 #

interface IRule {
  activationDate: number;
  contentSources: string[];
  createdBy: string | undefined;
  dateCreated: number;
  dateUpdated: number;
  publishFailed: boolean;
  name: string;
  ruleCustomFields: {
    CustomFields: {
      phrases: string[];
      warning: string;
    };
  };
  ruleId: string;
}

数据示例 #

{
  "activationDate": 1664390668.694,
  "contentSources": [""],
  "createdBy": "iusername",
  "dateCreated": 1664390668.694,
  "dateUpdated": 1664390668.694,
  "name": "charm",
  "publishFailed": false,
  "ruleCustomFields": {
    "CustomFields": {
      "phrases": ["fake-chrm"],
      "warning": "blocked"
    }
  },
  "ruleId": "1233"
}

尝试的代码 #

const flatItems = rules.map((item) => ({
  ...item,
  phrase: item.ruleCustomFields.CustomFields.phrases[0]
}));

原因分析 #

报错说明部分数据中ruleCustomFields或其下的CustomFields不存在，大概率是接口定义与实际返回数据不匹配（比如部分数据里这两个字段是可选的），或者数据源本身缺失这部分结构。

解决方案 #

1. 用可选链安全访问嵌套字段

使用TypeScript的可选链?.避免层级访问时的报错，配合空值合并运算符??可以设置默认值：

const flatItems = rules.map((item) => ({
  ...item,
  phrase: item.ruleCustomFields?.CustomFields?.phrases?.[0] ?? '' // 可替换为你需要的默认值
}));

这种方式不会因为某一层字段缺失而抛出错误，会直接返回预设的默认值。

2. 修正接口定义（如果字段确实可选）

如果业务场景中ruleCustomFields或CustomFields本身就可能不存在，需要修改接口将这些字段标记为可选：

interface IRule {
  activationDate: number;
  contentSources: string[];
  createdBy: string | undefined;
  dateCreated: number;
  dateUpdated: number;
  publishFailed: boolean;
  name: string;
  ruleCustomFields?: { // 标记为可选字段
    CustomFields?: { // 标记为可选字段
      phrases: string[];
      warning: string;
    };
  };
  ruleId: string;
}

修改接口后再配合可选链使用，就能消除类型检查报错。

3. 先过滤无效数据

如果只需要处理结构完整的规则数据，可以先过滤掉缺失必要字段的项：

// 过滤出结构完整、且phrases数组不为空的项
const validRules = rules.filter(item => 
  item.ruleCustomFields && 
  item.ruleCustomFields.CustomFields && 
  Array.isArray(item.ruleCustomFields.CustomFields.phrases) && 
  item.ruleCustomFields.CustomFields.phrases.length > 0
);

const flatItems = validRules.map((item) => ({
  ...item,
  phrase: item.ruleCustomFields.CustomFields.phrases[0]
}));

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