Node.js购物车开发：Ejs if语句报Cannot read property 'totalItems' of undefined

嘿，这个问题我之前做Node.js购物车项目时也碰到过！本质是首次访问网站时session.cart还没被初始化，属于undefined，你直接去访问它的totalItems属性自然会抛出"Cannot read property 'totalItems' of undefined"的错误；而当你添加商品到购物车后，后端代码应该已经创建了session.cart对象，所以后续访问就正常了。

下面给你几个靠谱的解决办法，按推荐程度排序：

• 方法一：提前在后端初始化session.cart（最佳实践）
  从根源解决问题，在处理请求的中间件里，提前检查并初始化购物车对象。这样不管用户是不是首次访问，session.cart都一定是一个合法对象，EJS里的判断永远不会报错。

  在你的Node.js后端代码中添加如下中间件：

  app.use((req, res, next) => {
    // 如果session中没有cart，就初始化一个默认购物车
    if (!req.session.cart) {
      req.session.cart = {
        totalItems: 0,
        items: [] // 可以根据你的需求添加其他默认属性
      };
    }
    next();
  });
  

  之后你在EJS里原来的代码就可以正常使用了，而且后续添加商品时直接修改session.cart的属性即可，逻辑更统一。

• 方法二：使用可选链操作符（简洁高效）
  如果你的Node.js环境支持ES2020及以上（现在大部分环境都支持），可以直接用可选链?.来规避undefined的问题。修改EJS中的判断语句：

  <% if (session.cart?.totalItems) { %> </i> Cart <span class="badge"><%= session.cart.totalItems %></span></a> <% } %>
  

  当session.cart是undefined时，session.cart?.totalItems会直接返回undefined，不会触发报错，条件判断也会不成立，完美适配首次访问的场景。

• 方法三：多层条件判断（兼容旧环境）
  如果你需要兼容不支持可选链的旧环境，可以用多层逻辑判断，先确认session.cart存在，再去访问totalItems：

  <% if (session.cart && session.cart.totalItems) { %> </i> Cart <span class="badge"><%= session.cart.totalItems %></span></a> <% } %>
  

  这种方法兼容性好，但代码相对啰嗦一点。

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