使用Firestore的getDocs与getDoc方法时遭遇TypeError空值读取问题求助

让我帮你拆解这两个报错，它们其实都是异步时机不对和DOM元素存在性未校验导致的，咱们一个个来解决：

第一个错误：Cannot read properties of null (reading 'email') #

这个问题出在auth.currentUser的获取时机上：
Firebase Auth 的用户状态初始化是异步的，虽然你在DOMContentLoaded事件里执行代码，但此时页面DOM加载完成了，用户的认证状态可能还没同步完成，auth.currentUser会返回null，直接访问user.email自然就报错了。

解决办法：用Firebase Auth官方推荐的onAuthStateChanged监听函数来获取用户，它会在用户状态变化（包括初始加载）时触发，确保你拿到的是有效的用户对象。

第二个错误：Cannot read properties of null (reading 'addEventListener') #

这个问题是因为你遍历requests集合的文档时，假设页面上一定存在ID等于doc.id的DOM元素，但实际情况是：要么页面上根本没有这个ID的元素，要么元素的ID和文档ID不匹配（比如大小写、特殊字符差异），导致document.getElementById(doc.id)返回null，调用addEventListener就会报错。

解决办法：绑定事件前先校验元素是否存在；同时检查文档ID和页面元素ID的一致性。

修改后的完整代码 #

document.addEventListener('DOMContentLoaded', function() { 
  // 修复用户状态获取的异步问题
  auth.onAuthStateChanged(function(user) {
    if (user) {
      // 确认用户已登录后，再获取用户数据
      getDoc(doc(db, "users", user.email)).then(docSnap => { 
        if (docSnap.exists()) { 
          const uEmail = docSnap.get("email"); 
          const uName = docSnap.get("name"); 
          const uPost = docSnap.get("post"); 
          const uRating = docSnap.get("rating"); 
          const uTeam = docSnap.get("team"); 
          console.log(uEmail,uName,uPost,uRating,uTeam); 
        } else {
          console.log("未找到对应用户的Firestore文档！");
        }
      }).catch(error => {
        console.error("获取用户数据失败：", error);
      });
    } else {
      console.log("用户未登录，请先登录！");
      // 这里可以添加未登录的处理逻辑，比如跳转到登录页
    }
  });

  // 修复DOM元素不存在的问题
  getDocs(collection(db, "requests")).then(querySnapshot => { 
    querySnapshot.forEach((doc) => { 
      const targetElement = document.getElementById(doc.id);
      if (targetElement) { // 先校验元素是否存在
        targetElement.addEventListener('click', function() { 
          openAcceptModal(); 
        });
      } else {
        console.log(`未找到ID为${doc.id}的DOM元素，请检查ID是否匹配`);
      }
    });
  }).catch(error => {
    console.error("获取请求数据失败：", error);
  });
});

额外补充建议 #

1. 如果requests对应的DOM元素是动态生成的（比如通过JS渲染到页面），那你需要确保在获取完Firestore数据后再生成元素，或者用事件委托的方式（把事件绑定到父元素上，通过事件冒泡处理），这样即使元素后续才生成，也能触发事件。
2. 建议给所有异步操作加上catch捕获错误，方便排查问题。

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