Express中req.params.id返回有效ID与null两个值的原因排查

你遇到的req.params.id出现两次值（正确ID + null），核心原因是浏览器发起了两次请求命中/campgrounds/:id路由，其中第二次请求的ID无效导致findById()返回null；而Chrome无限加载是因为无效请求未被正确响应，导致请求挂起。以下是具体排查方向和解决方法：

1. 浏览器自动请求/favicon.ico触发路由匹配 #

Chrome等浏览器会自动向服务器请求网站图标/favicon.ico，如果你的项目没有专门处理这个路由，且/campgrounds/:id路由优先级更高，这个请求会被捕获，此时req.params.id的值为favicon.ico。Mongoose用该字符串查询自然找不到文档，返回null；若路由仅处理campground存在的情况，未处理空结果分支，就会导致服务器不发送响应，浏览器持续等待。

解决方法：

• 新增专门路由处理favicon请求：

  app.get('/favicon.ico', (req, res) => res.sendStatus(204)); // 返回204无内容，阻止浏览器重试
  

• 或者将favicon.ico放在静态资源文件夹（如public），通过express.static让Express自动处理：

  app.use(express.static(path.join(__dirname, 'public')));
  

2. EJS模板中存在错误的资源引用路径 #

如果show.ejs里引用CSS、JS、图片时使用相对路径（如./styles/main.css），浏览器会将其解析为/campgrounds/123/styles/main.css（基于当前详情页URL）。这个路径会被/campgrounds/:id路由捕获，此时req.params.id为123/styles/main.css，Mongoose查询返回null；若路由未处理该情况，请求会挂起。

解决方法：

• 所有资源引用改为绝对路径：

  <!-- 错误写法 -->
  <link rel="stylesheet" href="./styles/main.css">
  <!-- 正确写法 -->
  <link rel="stylesheet" href="/styles/main.css">
  

3. 路由未处理查询结果为空的分支 #

你添加if语句避免了崩溃，但如果仅在campground存在时渲染页面，未处理campground为null的情况，会导致服务器不发送任何响应，浏览器持续等待。

解决方法：

• 确保路由所有分支都发送响应：

  app.get('/campgrounds/:id', async (req, res) => {
    const campground = await Campground.findById(req.params.id);
    if (!campground) {
      // 可选：跳回列表页或返回404页面
      return res.redirect('/campgrounds');
    }
    res.render('campgrounds/show', { campground });
  });
  

快速排查建议 #

先在/campgrounds/:id路由顶部添加日志，确认实际收到的请求ID：

app.get('/campgrounds/:id', async (req, res) => {
  console.log('请求ID:', req.params.id); // 查看控制台输出的两次ID具体值
  // 后续代码...
});

通过日志可直接定位第二次请求的来源，再针对性解决。

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