TypeScript中使用括号表示法访问嵌套可选属性报错排查

你遇到的问题核心是TypeScript无法通过includes检查缩小messageType的类型范围：虽然你用as keyof WhatsAppMessageObject做了断言，但TypeScript会把messageObject[messageType]推断成所有属性的联合类型（包括没有id/mime_type的text结构），因此访问这两个属性时会触发类型错误。

下面是三种针对性的解决办法：

方案一：自定义类型守卫，精准识别文件消息类型 #

写一个类型守卫函数，明确告诉TypeScript当前messageType属于文件类消息的key，这样进入判断分支后，类型推断会自动精准匹配：

// 自定义类型守卫：判断是否为文件消息类型
function isFileMessageType(type: string): type is "audio" | "document" {
  return ["audio", "document"].includes(type);
}

// 修改处理函数中的判断逻辑
function handleMessageType(messageObject: WhatsAppMessageObject) {
  const {from, id: messageId} = messageObject
  const messageType = messageObject.type;
  let messageData: MessageData = { type: messageType };

  // 现在TypeScript能识别出messageType是audio或document
  if (isFileMessageType(messageType)) {
    messageData.id = messageObject[messageType]?.id;
    messageData.mimeType = messageObject[messageType]?.mime_type;
  } 

  if(messageType === 'text') {
    messageData.message = messageObject.text!.body
    messageData.normalizedMessage = normalizeString(messageObject.text!.body)
  }

  return {messageId, from, messageData}
}

方案二：用Switch-Case做类型缩小 #

如果不想额外写类型守卫，直接用switch-case逐个匹配文件类型，TypeScript会自动在每个case中缩小类型范围：

function handleMessageType(messageObject: WhatsAppMessageObject) {
  const {from, id: messageId} = messageObject
  const messageType = messageObject.type;
  let messageData: MessageData = { type: messageType };

  // 替换原来的includes判断
  switch(messageType) {
    case "audio":
      messageData.id = messageObject.audio?.id;
      messageData.mimeType = messageObject.audio?.mime_type;
      break;
    case "document":
      messageData.id = messageObject.document?.id;
      messageData.mimeType = messageObject.document?.mime_type;
      break;
  }

  if(messageType === 'text') {
    messageData.message = messageObject.text!.body
    messageData.normalizedMessage = normalizeString(messageObject.text!.body)
  }

  return {messageId, from, messageData}
}

方案三：重构为可辨识联合类型（长期规范方案） #

把WhatsAppMessageObject改成可辨识联合类型，让type字段和对应的属性强绑定，从根源上消除类型歧义：

// 拆分不同类型的消息为单独类型
type WhatsAppAudioMessage = {
  id: string;
  from: string;
  type: "audio";
  audio: { id?: string; mime_type?: string };
  text?: { body?: string };
};

type WhatsAppDocumentMessage = {
  id: string;
  from: string;
  type: "document";
  document: {
    caption?: string;
    filename: string;
    sha256: string;
    mime_type: string;
    id: string;
  };
  text?: { body?: string };
};

type WhatsAppTextMessage = {
  id: string;
  from: string;
  type: "text";
  text: { body?: string };
};

// 合并为联合类型
type WhatsAppMessageObject = WhatsAppAudioMessage | WhatsAppDocumentMessage | WhatsAppTextMessage;

// 处理函数自动获得精准类型推断
function handleMessageType(messageObject: WhatsAppMessageObject) {
  const { from, id: messageId } = messageObject;
  const messageType = messageObject.type;
  let messageData: MessageData = { type: messageType };

  if (messageType === "audio" || messageType === "document") {
    // TypeScript自动知道这里有对应的audio/document属性
    messageData.id = messageObject[messageType].id;
    messageData.mimeType = messageObject[messageType].mime_type;
  }

  if (messageType === "text") {
    // 这里不需要!断言，联合类型保证text属性存在
    messageData.message = messageObject.text.body;
    messageData.normalizedMessage = normalizeString(messageObject.text.body);
  }

  return { messageId, from, messageData };
}

内容的提问来源于stack exchange，提问作者Sebastián Zegada