EJS 模板中直接访问未定义变量（如 donors）会导致 ReferenceError，使页面无法渲染。本文详解如何通过统一数据结构、条件防护和路由逻辑优化，确保模板健壮运行。
如何在 ejs 模板中安全处理未定义变量以避免渲染错误
在使用 Express + EJS 构建动态网页时，一个常见却容易被忽视的问题是：模板中引用了后端未传递的变量，导致整个页面崩溃并抛出 ReferenceError: xxx is not defined。正如您遇到的情况—— 0) { %> 这一行看似做了空值检查，但若 donors 根本未在 res.render() 中传入，JavaScript 引擎会在解析阶段直接报错，根本不会执行到 && 后面的判断。
? 根本原因分析
观察您的三处 GET 路由：
// ❌ 问题路由1：未传任何数据
app.get('/donors', (req, res) => {
res.render('donors.ejs', {}); // ← donors 未定义！
});
// ❌ 问题路由2：同样未传 donors
app.get('/views/donors.ejs', (req, res) => {
res.render('donors.ejs', {}); // ← donors 未定义！
});而您的 POST 路由和第一个 GET 路由均显式传入了 donors: ...，因此能正常渲染。EJS 不会为缺失变量赋予 undefined 并静默继续——它会立即中断渲染并抛出 ReferenceError。
✅ 正确解决方案
1. 统一数据结构：所有路由必须提供 donors
即使无数据，也应传递一个默认值（如空数组），而非省略字段：
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
// ✅ 修复后的 GET 路由（推荐）
app.get('/donors', (req, res) => {
res.render('donors.ejs', {
donors: [],
blood_type: [],
city: [],
getBloodTypeText: getBloodTypeText,
getCompatibleBloodTypes: getCompatibleBloodTypes
});
});
// ✅ 避免直接访问 .ejs 路径（开发调试除外），若必须保留则同样初始化
app.get('/views/donors.ejs', (req, res) => {
res.render('donors.ejs', { donors: [] });
});? 提示：
donors: []是最佳实践——既满足donors.length安全访问，又与实际查询返回的数组类型一致，避免后续.forEach()报错。
2. 模板层双重防护（增强鲁棒性）
即便后端已保障，EJS 中仍建议用 typeof 或 in 操作符做兜底（尤其在多人协作或动态传参场景）：
<div class="container mt-5">
<div class="row justify-content-center">
<!-- 安全检查：变量存在且为数组 -->
<% if (typeof donors !== 'undefined' && Array.isArray(donors) && donors.length > 0) { %>
<% donors.forEach(donor => { %>
<div class="col-12 col-sm-6 col-lg-4 mb-4">
<div class="card" style="background-color: #D27878;">
<div class="card-body">
<h5 class="card-title"><%= donor.full_name || 'N/A' %></h5>
<p class="card-text">Blood Type: <%= donor.blood_type || 'Unknown' %></p>
<p class="card-text">City: <%= donor.city_name || 'Not specified' %></p>
<p class="card-text">Phone: <%= donor.phone_number || '—' %></p>
</div>
</div>
</div>
<% }); %>
<% } else { %>
<div class="alert alert-info text-center w-100">
<p class="mb-0">No donors available at the moment.</p>
</div>
<% } %>
</div>
</div>3. 路由逻辑优化建议
- 删除重复的
/donorsGET 路由（当前代码中存在两个同路径路由，Express 仅注册第一个，第二个无效）； - 移除
/views/donors.ejs这类直接暴露模板路径的路由（存在安全风险，且不符合 REST 设计）； - 将“默认展示”逻辑合并到主
/donorsGET 路由中（即您第一个 GET 路由），作为唯一入口。
4. 额外注意事项
- ✅ 始终在
res.render()的数据对象中显式声明所有模板中引用的变量； - ✅ 使用 ESLint +
eslint-plugin-ejs可提前发现模板变量未定义风险； - ✅ 开发环境开启
app.set('view options', { debug: true })获取更清晰的错误定位。
通过以上调整，您的 donors.ejs 将在任何路由入口下稳定渲染，彻底规避 donors is not defined 错误，同时提升代码可维护性与用户体验。
