本文旨在解决在EJS模板中集成Mapbox时，因数据传递不当导致的TypeError: Cannot read properties of undefined (reading 'coordinates')错误。核心问题在于将JSON字符串化的对象再次用引号包裹，使其在客户端JavaScript中无法被正确解析为对象。通过移除EJS模板中JSON.stringify输出外部的额外引号，可确保数据作为有效的JavaScript对象字面量被直接赋值，从而使Mapbox能够正确访问地理坐标信息。
问题描述与背景
在开发基于Node.js和Express的应用时，经常需要将后端数据渲染到前端EJS模板中。当使用Mapbox GL JS库来展示地理位置信息时，一个常见的场景是将包含地理坐标的营地（campground）对象从服务器传递到客户端JavaScript。然而，在实践中，开发者可能会遇到Uncaught TypeError: Cannot read properties of undefined (reading 'coordinates')这样的错误。
这个错误通常发生在尝试访问Mapbox GL JS配置中的campground.geometry.coordinates时，表明campground变量在客户端JavaScript中并非预期的对象，或者其geometry属性为undefined。尽管后端数据结构正确，且EJS模板中的代码看似合理，但细微的语法错误可能导致前端脚本无法正确解析数据。
错误根源分析
问题的核心在于EJS模板中数据传递的方式。原始代码如下：
<script>
const mapToken = '<%=process.env.MAPBOX_TOKEN%>';
const campground = '<%- JSON.stringify(campground) %>'; // 错误示例
</script>以及对应的客户端JavaScript文件showPageMap.js：
mapboxgl.accessToken = mapToken;
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v12',
center: campground.geometry.coordinates, // 错误发生在这里
zoom: 8,
});
new mapboxgl.Marker()
.setLngLat(campground.geometry.coordinates)
.addTo(map);当EJS模板被渲染后，campground变量在浏览器前端的实际表现如下：
<script>
const mapToken = 'TOKEN';
const campground = '{"geometry":{"type":"Point","coordinates":[8.520355,47.476804]},"_id":"648c26c9e3f99b64ff16c197","title":"Oberglatt Camp", ...}';
</script>可以看到，JSON.stringify(campground)的输出结果是一个JSON字符串。然而，由于在EJS模板中，这个JSON字符串又被一对单引号 ' 包裹起来，导致在客户端JavaScript中，campground变量被赋值为一个字符串类型的值，而不是一个可以直接访问属性的JavaScript对象。
当JavaScript尝试执行 campground.geometry.coordinates 时，它实际上是在一个字符串上查找geometry属性。字符串没有geometry属性，因此campground.geometry会解析为undefined。随后，尝试访问undefined的coordinates属性便会抛出TypeError: Cannot read properties of undefined。
多瑞外贸网店系统立足于全球化贸易往来的一款外贸类企业用户高端应用电子商务系统软件，帮助企业快速搭建网聚全球商机的电子商务系统。本系统使用纯正的英文，国外用户更容易阅读；多年专业外贸设计经验，熟练掌握美式英语，更符合国外用户考虑和解决问题的逻辑；设计风格、用户体验符合国外用户的习惯；简洁明了的设计风格正是欧美用户的所爱，时时推出新模板、紧跟时尚潮流，供您选择。新增加淘宝数据自动导入，批量上传商品，商
解决方案
解决此问题的关键是确保 JSON.stringify(campground) 的输出在EJS模板中被直接作为JavaScript对象字面量进行赋值，而不是作为被引号包裹的字符串。
正确的EJS模板代码应移除 JSON.stringify(campground) 外部的单引号：
<script>
const mapToken = '<%=process.env.MAPBOX_TOKEN%>';
const campground = <%- JSON.stringify(campground) %>; // 正确示例
</script>解释：
- JSON.stringify(campground) 会将后端JavaScript对象 campground 转换为一个标准的JSON字符串。例如，{"geometry":{"type":"Point","coordinates":[8.520355,47.476804]}}。
- EJS的 标签用于输出未转义的HTML内容。这意味着 JSON.stringify 的输出（即一个有效的JSON字符串，同时也是一个有效的JavaScript对象字面量）会直接插入到HTML中。
- 当浏览器解析这段 <script> 标签时，const campground = {"geometry": ...}; 会被解释为将一个JavaScript对象字面量赋值给 campground 变量。此时，campground 变量就成为了一个真正的JavaScript对象，可以正确地访问其属性，如 campground.geometry.coordinates。</script>
完整示例代码
1. show.ejs 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Campground Details</title>
<!-- Mapbox GL JS CSS -->
<link href="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css" rel="stylesheet">
<!-- 其他CSS链接 -->
</head>
<body>
<h1><%= campground.title %></h1>
<p><%= campground.location %></p>
<div id="map" style="width: 100%; height: 400px;"></div>
<!-- Mapbox GL JS JavaScript -->
<script src="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js"></script>
<script>
// 确保MAPBOX_TOKEN已在服务器端正确配置
const mapToken = '<%=process.env.MAPBOX_TOKEN%>';
// 关键修复：移除JSON.stringify外部的单引号
const campground = <%- JSON.stringify(campground) %>;
</script>
<script src="/path/to/your/showPageMap.js"></script>
<!-- 其他JavaScript文件 -->
</body>
</html>2. showPageMap.js 文件：
// 确保mapToken和campground变量已在show.ejs中正确定义和赋值
mapboxgl.accessToken = mapToken;
const map = new mapboxgl.Map({
container: 'map', // 地图容器的ID
style: 'mapbox://styles/mapbox/streets-v12', // Mapbox样式URL
center: campground.geometry.coordinates, // 使用正确解析的营地坐标
zoom: 8, // 初始缩放级别
});
// 添加导航控件
map.addControl(new mapboxgl.NavigationControl());
// 添加标记
new mapboxgl.Marker()
.setLngLat(campground.geometry.coordinates)
.setPopup(
new mapboxgl.Popup({ offset: 25 })
.setHTML(`<h3>${campground.title}</h3><p>${campground.location}</p>`)
)
.addTo(map);注意事项与最佳实践
- 数据类型匹配： 始终确保EJS模板中嵌入的数据类型与客户端JavaScript期望的数据类型相匹配。对于复杂的对象，通常建议使用JSON.stringify()在服务器端将其转换为JSON字符串，然后在客户端根据需要（如果被引号包裹）使用JSON.parse()进行解析。但在此特定场景下，直接输出JSON字符串作为JavaScript对象字面量是最简洁有效的方法。
- 安全性： 使用 输出未转义内容时需谨慎。如果 campground 对象中的数据来源于用户输入且未经充分清理，可能会存在跨站脚本攻击（XSS）的风险。然而，对于JSON.stringify的输出，通常认为是安全的，因为它会正确转义字符串中的特殊字符。
-
错误处理： 在实际应用中，应考虑campground对象可能为空或不包含geometry.coordinates的情况。可以在EJS模板或showPageMap.js中添加条件检查，以避免在数据不完整时抛出错误。
// 在showPageMap.js中进行检查 if (campground && campground.geometry && campground.geometry.coordinates) { mapboxgl.accessToken = mapToken; const map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v12', center: campground.geometry.coordinates, zoom: 8, }); // ... 添加标记等 } else { console.error("Campground data or coordinates are missing."); // 可以显示一个替代信息或隐藏地图 } - 环境变量： 确保process.env.MAPBOX_TOKEN在服务器环境中正确设置。在开发环境中，可以使用.env文件并通过dotenv库加载。
总结
TypeError: Cannot read properties of undefined (reading 'coordinates') 在Mapbox与EJS集成中是一个常见的数据类型不匹配问题。通过理解EJS模板渲染机制和JavaScript数据类型，我们可以发现并纠正将JSON.stringify输出再次包裹在引号中的错误。移除EJS模板中JSON.stringify(campground)外部的额外引号，使得其直接作为JavaScript对象字面量被赋值，是解决此问题的根本方法。遵循正确的模板语法和数据传递原则，能够确保前端脚本正确解析后端数据，从而顺利实现Mapbox地图的各项功能。
