无法从Firebase Firestore快照读取经纬度为Google Maps添加标记

问题本质 #

当前取值逻辑存在路径错误：Firestore查询返回的doc是DocumentSnapshot快照实例，文档内存储的所有业务字段（latitude、longitude、location等）都不会直接挂载在这个实例上，全部需要通过实例的data()方法返回的对象才能访问。
你在控制台打印doc.data()时能看到所有字段的完整内容，反向证明数据库内的数据存储没有缺失。但你后续写的doc.latitude、doc.longitude实际拿到的是undefined，因为快照实例本身没有这两个属性；后续经过parseFloat(undefined)会转为NaN，既不会抛出报错，也无法生成有效坐标，自然渲染不出标记。

可落地的修正实现 #

你数据库里同时存了两种格式的经纬度，任选一种方式取值都能正常运行：

• 方式1：读取单独存储的字符串格式经纬度
  把字段读取路径补全为doc.data()下的对应字段即可，调整后的完整代码如下：

  function initialize() {
      var latlng = new google.maps.LatLng(18.465733327729314, -69.93029399778331);
      var myOptions = {
          disableDefaultUI: true,
          zoom: 9,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP 
      };
      var map = new google.maps.Map(document.getElementById("map"), myOptions);
      db = firebase.firestore();
  
      db.collection("GranSantoDomingo").get().then((querySnapshot) => {
          querySnapshot.forEach((doc) => {
              // 先提取文档数据为独立变量，避免重复调用data()产生额外性能开销
              const docInfo = doc.data();
              console.log(doc.id, "=>", docInfo);
  
              var marker = new google.maps.Marker({
                  position: {
                      lat: parseFloat(docInfo.latitude),
                      lng: parseFloat(docInfo.longitude)
                  },
                  map: map,
              });
          });
      });
  }
  

• 方式2：直接读取原生Geopoint类型的location字段
  Firestore返回的Geopoint对象本身就内置了latitude、longitude两个数值型属性，不需要做字符串格式转换，精度更高，也完全可以替代冗余存储的两个字符串字段，只需要替换forEach内部的取值逻辑即可：

  querySnapshot.forEach((doc) => {
      const docInfo = doc.data();
      const geoLocation = docInfo.location;
      var marker = new google.maps.Marker({
          position: {
              lat: geoLocation.latitude,
              lng: geoLocation.longitude
          },
          map: map,
      });
  });
  

常见踩坑提示 #

• 除了DocumentSnapshot自带的内置属性（如doc.id、doc.ref、doc.exists），不要直接在快照实例上读取业务字段，否则会拿到undefined且无明确报错，排查成本极高。
• 取值时如果不想先提取整个data()对象，也可以用快照自带的get()方法按字段名读取，比如doc.get('latitude')，效果和doc.data().latitude完全一致。

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