使用Node.js+EJS时出现Cannot read properties of null (reading 'name')错误

核心问题 #

使用EJS渲染品牌页面时，后端会收到两次请求：第一次能正常查询到品牌数据，第二次返回null，触发Cannot read properties of null (reading 'name')错误。但直接用Postman或fetch请求接口完全正常。

排查步骤 #

1. 确认第二次请求的来源
   在后端品牌接口里添加日志，打印请求路径和参数，搞清楚第二次请求的具体内容：

const brandId = req.params.id;
// 新增日志，查看请求详情
console.log('当前请求路径:', req.originalUrl, '传入的品牌ID:', brandId);
const brand = await Brand.findOne({ _id: brandId });
const vehicles = await Vehicle.find({ brand: brandId });
console.log(brand);
res.render("brand", { brand, vehicles });

运行后查看控制台，大概率第二次请求是浏览器自动发起的/favicon.ico请求，被你的品牌路由（比如/brand/:id）匹配到了，此时brandId是favicon.ico，自然查不到数据返回null。

解决方案 #

方案1：单独处理favicon请求 #

在Express路由最前面添加逻辑，直接忽略或返回正确的图标：

// 处理浏览器的favicon请求，避免被品牌路由捕获
app.get('/favicon.ico', (req, res) => {
  res.status(204).end(); // 返回无内容状态码
  // 若有自定义图标，可改为：
  // res.sendFile(path.join(__dirname, 'public', 'favicon.ico'));
});

方案2：修正EJS里的静态资源路径 #

检查EJS模板里的图片、CSS、JS等资源路径，确保使用绝对路径（开头加/），避免浏览器错误解析路径：

<!-- 错误写法：相对路径会导致浏览器在当前品牌路径下请求资源 -->
<img src="logo.png" alt="logo">
<!-- 正确写法：绝对路径，直接从根目录请求 -->
<img src="/logo.png" alt="logo">

方案3：给EJS模板加容错处理 #

即使数据为null，也能保证页面不崩溃：

<div class="brand-title"><%= brand ? brand.name : '未知品牌' %> vehicles</div>
<div class="brand-logo">
  <img src="<%= brand ? brand.image : '/default-brand.png' %>" alt="brand-logo" />
</div>

额外建议 #

把静态资源路由（app.use(express.static('public'))）放在所有业务路由前面，让静态资源请求优先被处理，避免被业务路由错误匹配。

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