React+TS解构对象报错：属性'messages'不存在于'Notifications|undefined'

• 本质是TypeScript的类型安全校验触发：你的notificationData变量类型被标注为Notifications | undefined联合类型，undefined类型不存在messages属性，在你没有证明该变量一定是Notifications类型的前提下直接解构属性，就会抛出该错误。
• 导致notificationData包含undefined类型的常见场景：
  • 该变量是可选类型参数/属性，默认缺省值为undefined
  • 变量声明时未赋初始有效值，类型推导自动包含undefined
  • 该变量是异步请求返回的可选字段，未做请求成功校验就直接使用
• 你在解构操作前没有做非空判断，TypeScript无法确认运行时notificationData一定不为undefined，因此触发类型报错。

典型错误代码示例：

const publish = () => {
  // 直接解构可能为undefined的变量，触发报错
  const { messages } = notificationData;
}

快速修复参考：

// 方案1：解构前加非空判断
const publish = () => {
  if (!notificationData) return;
  const { messages } = notificationData;
}

// 方案2：用空值合并运算符兜底
const { messages } = notificationData ?? {};

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