可选链操作符引发TypeError，求符合预期的JavaScript表达式写法

你遇到的问题是因为a?.b在a没有b属性时会返回undefined，后续的.c尝试读取undefined的属性，自然抛出TypeError。要实现**a无b时返回undefined，a有b但b无c时抛出错误**的需求，可以用以下几种方式：

方法1：逻辑与运算符结合可选链 #

const result = a?.b && a.b.c;

• 当a没有b时，a?.b为undefined，整个表达式返回undefined；
• 当a有b但b无c时，a.b.c会直接抛出TypeError；
• 当a有b且b有c时，返回c的值。

方法2：条件表达式 #

const result = a?.b ? a.b.c : undefined;

逻辑和方法1完全一致，只是写法更直观，通过三元运算符明确分支逻辑。

方法3：封装复用函数 #

如果需要多次使用这个逻辑，可以封装成函数：

function getCFromA(a) {
  const b = a?.b;
  if (b === undefined) return undefined;
  return b.c;
}

// 使用示例
const result = getCFromA(a);

这种方式可读性更强，也方便后续扩展逻辑。

验证场景 #

• 输入a = {}：返回undefined，无报错；
• 输入a = { b: {} }：抛出TypeError: Cannot read properties of undefined (reading 'c')；
• 输入a = { b: { c: 'hello' } }：返回'hello'。

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