TypeScript嵌套对象解构重命名变量遇属性不存在报错的解决方法

你的问题出在三个核心点上：接口属性的可选性、未定义变量、类型不匹配，下面逐个拆解并给出修正方案：

错误根源 #

1. 可选属性未兜底：Message接口里的from、Chat接口里的id都是带?的可选属性，直接嵌套解构时，TypeScript会因为这些属性可能为undefined而报错。
2. 变量未定义：代码里的chatId没有在解构语句中声明，自然会提示“属性不存在”。
3. 类型不匹配：ctx.message || {}把空对象赋值给Message类型，空对象不符合接口的嵌套结构，触发类型校验错误。

修正方案一：解构时添加默认兜底 #

通过给嵌套属性设置默认空对象，避免可选属性为undefined时的解构失败，同时用Partial<Message>兼容空对象的类型：

const banUser = async (ctx: Context, next: NextFunction) => {
  // 用Partial<Message>让空对象符合类型要求
  const message = ctx.message || {} as Partial<Message>;
  
  // 给from、chat设置默认空对象，解构时不会因属性不存在报错
  const {
    from: { id: userId } = {},
    chat: { id: chatId } = {}
  } = message;

  console.log('userId ', userId);
  console.log('chatId ', chatId);

  await next();
};

修正方案二：提前判断属性存在性（更严谨） #

如果业务逻辑必须依赖userId和chatId，可以逐层判断属性是否存在，避免后续操作出现异常：

const banUser = async (ctx: Context, next: NextFunction) => {
  // 先判断message是否存在
  if (!ctx.message) {
    await next();
    return;
  }

  const { from, chat } = ctx.message;
  // 再判断from和chat是否存在
  if (!from || !chat) {
    await next();
    return;
  }

  // 此时from.id和chat.id可能仍为undefined，若需要非空值可继续判断
  const userId = from.id;
  const chatId = chat.id;

  console.log('userId ', userId);
  console.log('chatId ', chatId);

  await next();
};

关键注意事项 #

• 对于带?的可选属性，TypeScript会强制要求处理其可能为undefined的情况，要么提前判断，要么设置默认值。
• 自定义变量名的解构语法from: { id: userId }是正确的，问题核心在于可选属性的处理。
• 不要直接将空对象赋值给非Partial的接口类型，会触发类型不匹配错误，用Partial<T>可以临时将所有属性转为可选。

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