如何在一个snapshot listener中使用另一个监听器的变量

直接return scores变量报错的核心原因如下：

• onSnapshot是异步触发的实时监听器，你嵌套注册的三个监听器回调执行时机完全独立，scores是scorecard查询回调内的局部变量，competition查询的回调作用域无法直接访问这个变量
• 在异步回调里return的值只会被Firebase SDK内部接收，不会传递到你其他业务逻辑块中
• 现有嵌套写法会导致users集合每次更新时都重复注册内层的两个新监听器，且内层监听器没有做取消订阅处理，会造成内存泄漏和重复触发问题

将嵌套的监听器改为平级注册，在外层作用域定义共享变量存储跨逻辑需要使用的topScorerUid和用户数据缓存，同时收集所有监听器的取消订阅函数，在页面失焦时统一清理。

修正后的完整代码：

const [scoreCards, setscoreCards] = useState([]); // 存储所有成绩卡片信息
const [comps, setComps] = useState({}); // 补充原代码缺失的赛事信息state

useFocusEffect(
  React.useCallback(() => {
    const scorecardCollectionRef = collection(db,"competitions/" + id + "/scorecard");
    const competitionCollectionRef =  query(collection(db, "competitions"), where('id', "==",id));
    const usersCollectionRef = collection(db, "users");

    // 外层作用域定义共享变量，供不同监听器回调访问
    let allusersCache = {};
    let topScorerUid = null;
    // 收集所有监听器的取消订阅方法
    const unsubscribers = [];

    // 1. 监听用户集合
    const unsubUsers = onSnapshot(usersCollectionRef, (snapshot) => {
      allusersCache = {};
      snapshot.forEach((doc) => {
        allusersCache[doc.id] = doc.data();
      });
    });
    unsubscribers.push(unsubUsers);

    // 2. 监听成绩卡集合
    const unsubScorecard = onSnapshot(
      query(scorecardCollectionRef, orderBy("finalscore", "asc")),
      (snapshot) => {
        const scores = [];
        snapshot.forEach((doc) => {
          const docData = doc.data();
          scores.push({
            ...allusersCache[docData.uid],
            ...docData,
          });
        });

        // 更新共享的第一名uid变量
        topScorerUid = scores?.[0]?.uid || null;
        console.log('当前排名第一用户uid：', topScorerUid);
        
        setscoreCards(scores);
      }
    );
    unsubscribers.push(unsubScorecard);

    // 3. 监听赛事集合
    const unsubCompetition = onSnapshot(
      query(competitionCollectionRef),
      (snapshot) => {
        snapshot.forEach((doc) =>{
          const comp = {
              ...doc.data(),
              id: doc.id
          }
          setComps(comp);

          if(today > (comp?.date.seconds*1000)+604800000){
            if(comp?.closed == 'open'){
              updatecompetitionUsersCount(id, {closed:"closed"})
              // 直接读取外层共享的topScorerUid即可使用
              console.log('赛事关闭时第一名uid：', topScorerUid);
              // 此处编写依赖topScorerUid的业务逻辑
            }
          }
        })
      }
    );
    unsubscribers.push(unsubCompetition);

    return () => {
      // 页面失焦时取消所有实时监听器，避免内存泄漏
      unsubscribers.forEach(unsub => typeof unsub === 'function' && unsub());
    };
  }, [id, today]) // 补充依赖项，避免闭包拿到旧的id、today值
);

• 不要嵌套注册onSnapshot监听器，如果必须嵌套，一定要在注册新监听器前取消之前注册的同类型监听器，否则会重复触发回调、消耗额外性能
• 读取数组第一个元素的属性时务必加可选链?.，避免首次回调触发时数组为空抛出Cannot read properties of undefined运行时错误
• 如果不想用外层共享变量，也可以从已更新的scoreCards state中读取scoreCards[0]?.uid使用，但需要注意React useCallback的闭包陷阱，要么把scoreCards加入依赖数组，要么用ref存储scoreCards的最新值
• 所有onSnapshot调用都会返回对应的取消订阅函数，必须在页面失焦/组件卸载时统一调用清理，否则监听器会持续在后台运行占用资源

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