LeafletJS加载JSON数据绑定Marker弹窗报错排查求助

问题场景 #

首次使用LeafletJS实现地图与本地JSON数据交互，编写了获取people.json数据、创建Marker并绑定弹窗的代码，但点击Marker时触发以下错误，弹窗无法显示：

VM773 leaflet.js:5 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at i._updateContent (VM773 leaflet.js:5:91249)
    at i.update (VM773 leaflet.js:5:90254)
    at i.onAdd (VM773 leaflet.js:5:89656)
    at i.onAdd (VM773 leaflet.js:5:92018)
    at i._layerAdd (VM773 leaflet.js:5:63932)
    at i.whenReady (VM773 leaflet.js:5:42041)
    at i.addLayer (VM773 leaflet.js:5:64307)
    at i.openPopup (VM773 leaflet.js:5:94859)
    at i.openPopup (Popup.js:424:14)
    at i._openPopup (Popup.js:499:9)

用到的代码 #

JavaScript代码

fetch("./assets/js/people.json")
  .then(response => response.json())
  .then(data => {
    data.forEach(person => {
      let content = `<h3>${person.name}</h3><br>${person.phone}`;
      let mark=L.marker([person.lat, person.lng])
      .bindPopup(content)
      .addTo(map);
    });
  }).catch(error => console.error(error)); 

JSON文件内容

[
    {
      "lat": 47.50145,
      "lng": 10.12264,
      "name": "Cindy",
      "phone": 0000000000
    },
    {
      "lat": 47.48756,
      "lng": 12.18524,
      "name": "Gaia",
      "phone": 1111111111
    }
  ]

错误原因 #

JSON中phone字段是数字类型，当用模板字符串拼接后，Leaflet的bindPopup在处理包含纯数字的内容时，内部渲染逻辑无法正确将其转换为DOM节点，触发appendChild类型错误。另外，JSON里以0开头的数字（比如0000000000）会被自动解析为0，丢失前导0，这也不符合电话号码的存储规范。

解决办法 #

有两种可行方案，推荐第二种：

方案1：在JS中把phone转为字符串 #

修改模板字符串部分，将数字类型的phone转为字符串：

// 方法A：用toString()转换
let content = `<h3>${person.name}</h3><br>${person.phone.toString()}`;

// 方法B：用String()强制转换
let content = `<h3>${person.name}</h3><br>${String(person.phone)}`;

方案2：修改JSON文件，将phone设为字符串类型（推荐） #

直接把JSON里的phone值改为字符串格式，既避免类型问题，也能保留电话号码的原始格式：

[
    {
      "lat": 47.50145,
      "lng": 10.12264,
      "name": "Cindy",
      "phone": "0000000000"
    },
    {
      "lat": 47.48756,
      "lng": 12.18524,
      "name": "Gaia",
      "phone": "1111111111"
    }
  ]

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