使用Mapbox时报Cannot read properties of undefined (reading 'coordinates')如何解决

报错核心原因为前端地图JS执行时，adventure.geometry 为 undefined，因此无法读取其下的coordinates属性，可按以下步骤排查修复：

1. 修复地理编码空值问题 #

如果用户输入的地址无效，Mapbox地理编码接口返回的features数组为空，直接取[0]会拿到undefined，写入数据库的geometry就会是空值，后续查询自然拿不到坐标。
修改createAdventure控制器代码，增加空值判断：

module.exports.createAdventure = async (req, res, next) => {
    const geoData = await geocoder.forwardGeocode({
        query: req.body.adventure.location,
        limit: 1
    }).send()
    // 新增地理编码结果校验
    if(!geoData.body.features.length){
        req.flash('error', '输入的地址无效，请重新输入');
        return res.redirect('/adventures/new');
    }
    const adventure = new Adventure(req.body.adventure);
    adventure.geometry = geoData.body.features[0].geometry;
    adventure.images = req.files.map(f => ({ url: f.path, filename: f.filename}));
    adventure.author = req.user._id;
    await adventure.save();
    req.flash('success', 'Successfully made adventure');
    res.redirect(`/adventures/${adventure._id}`)
};

2. 校验模板变量注入逻辑 #

前端地图JS中直接使用的adventure全局变量，需要在模板中提前正确注入，避免转义导致对象结构异常。以EJS模板为例，需要在引入地图JS之前添加如下代码：

<script>
    const mapToken = '<%= process.env.MAPBOX_TOKEN %>';
    // 注意用 <%- 而非 <%= 避免JSON被转义
    const adventure = <%- JSON.stringify(adventure) %>;
</script>

3. 新增前端兼容逻辑 #

如果项目存在新增地图功能前创建的旧数据，这部分数据没有geometry字段，可在地图JS中增加兼容判断避免报错：

mapboxgl.accessToken = mapToken;
// 无坐标时使用默认坐标，可自行修改默认值
const center = adventure.geometry?.coordinates || [116.4074, 39.9042];
const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v10',
    center: center,
    zoom: 10
});

map.addControl(new mapboxgl.NavigationControl());

// 仅存在坐标时渲染标记点
if(adventure.geometry?.coordinates){
    new mapboxgl.Marker()
        .setLngLat(adventure.geometry.coordinates)
        .setPopup(
            new mapboxgl.Popup({ offset: 25 })
                .setHTML(
                    `<h3>${adventure.title}</h3><p>${adventure.location}</p>`
                )
        )
        .addTo(map)
}

内容的提问来源于stack exchange，提问作者Ventrity Customer Service