MongoDB查询结果无法在浏览器渲染的修复方法

本文详解为何 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 查询失败:', err);
    // 可选：渲染错误提示页面，或返回 JSON 错误响应
    res.status(500).render('Byproduct', {
      title: 'Product List',
      error: '产品加载失败，请稍后重试。'
    });
  }
});

关键注意事项：

• 确保模板文件（如 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。

总结：问题本质并非 MongoDB 不返回数据，而是异步流程控制不当，导致 res.render() 要么未被调用，要么传入了无效数据。切换到 async/await 不仅能修复渲染问题，还能提升错误追踪能力和代码可维护性。