Commerce.js初始化时cart.line_items未返回数组导致length报错如何解决

根本原因 #

Commerce.js的购物车数据是异步拉取加载的，初始化阶段cart对象中的line_items字段还未被接口返回值覆盖，处于undefined状态，直接访问length属性就会抛出「Cannot read property length of undefined」类型错误，你打印的三次结果依次为false、true、true也对应了异步数据从无到有的加载过程。

修复方案 #

• 使用可选链操作符兜底
  直接将原有判断语句替换为：
  const isEmpty = !cart?.line_items?.length;
  可选链语法会在访问路径中出现undefined/null时直接终止返回undefined，此时!undefined等价于true，刚好匹配空购物车的判断逻辑，写法最简洁。

• 状态初始化时设置默认值
  如果你是在React、Vue等框架中使用，声明cart状态时直接补全line_items的默认空数组结构，以React为例：
  const [cart, setCart] = useState({ line_items: [] });
  这样无论接口是否返回数据，line_items始终是数组类型，访问length属性永远不会报错。

• 前置添加类型校验兼容旧环境
  如果你的运行环境不支持可选链语法，可以先做类型判断再访问长度属性：
  const isEmpty = !Array.isArray(cart?.line_items) || !cart.line_items.length;
  只要line_items不是数组或者数组长度为0，都会判定为购物车为空，兼容性最好。

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