本文深入解析 Mongoose 的 find().then() 在 Express 路由中导致视图无法渲染的根本原因，提供基于 async/await 的可靠解决方案，并揭示常见的模板引擎配置遗漏。

在 Mongoose 搭配 Express 开发 Web 应用时，一个常见的陷阱是混淆 Promise 链的参数签名与传统回调函数——这直接造成“控制台能打印数据，但页面要么空白要么报错”的困惑。上面提到的这段代码就是典型问题：

ByProduct.find().then((err, ProductList) => { ... })

这里存在一个严重逻辑错误：Model.find() 返回的是 Promise 对象，它的 .then() 方法只接收一个参数——成功值（即查询结果数组），而不是 (err, result) 这种回调风格签名。因此，实际传入的 err 就是查询结果本身，而 ProductList 反而变成了 undefined。后续 res.render() 传入了空数据，模板可能因缺少变量而静默失败，或者因为 Promise 拒绝未被处理，导致请求一直挂起。

正确的做法是采用现代 JavaScript 的异步模式：async/await + try/catch。这样语义清晰，还能避开 Promise 链的陷阱：

router.get('/', async (req, res, next) => {
  try {
    const productList = await ByProduct.find(); // ✅ 直接拿到查询结果数组
    res.render('Byproduct', {
      title: 'Product List',
      productList: productList // ✅ 数据结构完整，模板里直接遍历
    });
  } catch (err) {
    console.error('MongoDB query failed:', err);
    // 可选：渲染带错误提示的页面，或者返回 JSON 错误响应
    res.status(500).render('Byproduct', {
      title: 'Product List',
      error: 'Failed to load products. Please try again later.'
    });
  }
});

⚠️ 关键注意事项：

• 确保你的模板文件（比如 views/Byproduct.ejs 或 views/Byproduct.pug）存在而且路径正确；
• 检查 Express 视图引擎是否已经配好（例如 EJS）：

  app.set('view engine', 'ejs');
  app.set('views', path.join(__dirname, 'views'));

• 如果用了 EJS，确认模板里正确使用了 productList 变量，比如：

  
    <% productList.forEach(product => { %>
      
  <%= product.name %>
    <% }); %>
  

• 不要混用 .then() 和回调风格；Mongoose 6+ 已经彻底弃用了回调接口（比如 find({}, callback)），只支持 Promise 或 async/await。