如何修复Pug文件中"Cannot read properties of undefined (reading 'length')"错误

我的项目技术栈：Pug模板引擎，Express、Mongoose作为中间件，Node.js服务器，MongoDB数据库。启动服务器后触发错误，查过相关资料和Stack Overflow解答都没解决，现在附上错误日志和Pug文件代码，需要修复提示。

浏览器错误日志 #

TypeError: D:\Github Repos\karibu-project\views\employeesList.pug:16
    14|       

    15|       

  > 16|       if employees.length

    17|         table.table

    18|           thead.thead-dark

    19|             tr


Cannot read properties of undefined (reading 'length')
    at eval (eval at wrap (D:\Github Repos\karibu-project\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:44:15)
    at template (eval at wrap (D:\Github Repos\karibu-project\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:191:7)
    at exports.renderFile (D:\Github Repos\karibu-project\node_modules\pug\lib\index.js:454:38)
    at exports.renderFile (D:\Github Repos\karibu-project\node_modules\pug\lib\index.js:444:21)
    at exports.__express [as engine] (D:\Github Repos\karibu-project\node_modules\pug\lib\index.js:493:11)
    at View.render (D:\Github Repos\karibu-project\node_modules\express\lib\view.js:135:8)
    at tryRender (D:\Github Repos\karibu-project\node_modules\express\lib\application.js:657:10)
    at Function.render (D:\Github Repos\karibu-project\node_modules\express\lib\application.js:609:3)
    at ServerResponse.render (D:\Github Repos\karibu-project\node_modules\express\lib\response.js:1039:7)
    at D:\Github Repos\karibu-project\index.js:92:9 

Pug文件代码（employeesList.pug） #

doctype html
html(lang='en')
  head
    meta(charset='UTF-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge')
    meta(name='viewport', content='width=device-width, initial-scale=1.0')    
    link(href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi' crossorigin='anonymous')
    script(src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js' integrity='sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3' crossorigin='anonymous')
    title Employees List
  body    
    .container
      h5 Hello, #{username}
      h3 List of employees
      
      
      if employees.length
        table.table
          thead.thead-dark
            tr
              th(scope='col') #
              th(scope='col') Name
              th(scope='col') Field
              th(scope='col') Age
              th(scope='col') Salary
              th(scope='col') Action
          tbody
          each employee in employees
            tr
              td(scope='row') #{employee._id}
              td #{employee.name}
              td #{employee.field}
              td #{employee.age}
              td #{employee.salary} 
              td 
                  form(method="POST", action="/employeesList")
                    input(type="hidden", name="_id", value=employee._id)
                    button(type="submit") DELETE
              td 
                  a(href="/editEmployee/" + employee._id) Edit
      else  
        p There are no registered employees

修复提示 #

• 检查Express路由的模板传参：找到index.js第92行（错误栈指向的位置），确认渲染employeesList模板时，是否正确传递了employees变量，比如：

  // 正确示例
  res.render('employeesList', { employees: employeeData, username: someUsername });
  

  确保变量名拼写正确（比如不要写成employee而非employees），且变量已被赋值。

• 处理Mongoose查询的异步逻辑：如果employees数据来自MongoDB查询，必须确保查询完成后再渲染模板。比如使用async/await：

  app.get('/employeesList', async (req, res) => {
    try {
      const employees = await Employee.find(); // Employee是你的Mongoose模型
      res.render('employeesList', { employees, username: req.user.username });
    } catch (err) {
      console.error(err);
      res.status(500).send('Server error');
    }
  });
  

  避免在查询未完成时就调用res.render，导致employees为undefined。

• 给Pug模板加防御性判断：修改Pug中的条件判断，先检查employees是否存在再访问length：

  if employees && employees.length
  

  这样即使employees为undefined，也不会触发错误。

• 验证Mongoose查询结果：检查Mongoose模型定义、集合名是否正确，查询语句是否有语法错误，确保查询能正常返回数据（可以在路由中console.log(employees)查看结果）。

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