React useEffect读取Firebase Realtime DB数据偶发加载失败问题

这段代码加载数据不稳定的核心是异步逻辑时序错误，附带几个会放大异常的实现问题：

• setArtikel(array)写在了onValue的回调函数外面：onValue发起的数据库请求是异步执行的，代码运行到setArtikel的时候，请求还没返回结果，array还是空数组，状态更新就已经完成了。只有极少数情况请求返回速度快到刚好赶在setArtikel执行前填完了数组，才会出现“加载成功”的假象，本质是碰运气的时序问题。
• 每次useEffect执行都重复调用initializeApp初始化Firebase，会导致SDK内部状态冲突，进一步提升加载失败的概率。Firebase初始化全局只需要执行一次，不应该放在组件副作用里反复跑。
• 用onValue搭配onlyOnce: true做单次读取不是官方推荐写法，容易残留无效监听，也不利于异常捕获。
• 副作用里没有写清理逻辑，组件卸载时未完成的请求、未注销的监听可能导致内存泄漏或异常状态。

首先把Firebase初始化移到组件外层全局执行，再调整异步逻辑的执行顺序，推荐用官方提供的get方法做单次数据读取：

import { initializeApp } from "firebase/app";
import { getDatabase, ref, get } from "firebase/database";

// 全局仅初始化一次Firebase，不要放在组件/effect内部
const firebaseApp = initializeApp(firebaseConfig);
const db = getDatabase(firebaseApp);

// 组件内部的副作用逻辑
React.useEffect(() => {
  const loadArticleList = async () => {
    const articleRef = ref(db, "articel");
    try {
      const snapshot = await get(articleRef);
      const result = [];
      snapshot.forEach((childNode) => {
        result.push(childNode.val());
      });
      // 拿到完整数据后再更新状态
      setArtikel(result);
    } catch (err) {
      // 可自定义错误处理逻辑，比如加载失败提示、错误日志上报
      console.error("文章列表加载失败:", err);
    }
  };

  loadArticleList();

  // 如果需要保留onValue的写法，必须把setState写在回调内，同时返回清理函数
  // 参考写法：
  // const articleRef = ref(db, "articel");
  // const unsubscribe = onValue(
  //   articleRef,
  //   (snapshot) => {
  //     const result = [];
  //     snapshot.forEach((childNode) => result.push(childNode.val()));
  //     setArtikel(result);
  //   },
  //   { onlyOnce: true }
  // );
  // return () => unsubscribe();
}, []);

• 把状态更新逻辑挪到异步请求返回结果之后执行，从根源解决时序错乱导致的偶发加载失败
• 把Firebase初始化逻辑移到组件外层，避免重复初始化导致的SDK状态异常
• 单次读取数据优先使用语义更明确的get方法，自带Promise规范，方便写错误捕获
• 补充异常捕获逻辑，加载失败时可以直接拿到错误原因，不需要靠反复刷新碰运气
• 若使用onValue监听，必须在useEffect的返回值里写注销监听的逻辑，避免内存泄漏

内容的提问来源于stack exchange，提问作者Captai-N