如何通过useEffect实现Firebase实时数据库数据变更同步至React页面？

你的问题出在使用了get()方法——它只会一次性读取数据，不会监听数据库的实时变更。要实现页面与数据同步，需要改用Firebase实时数据库的实时监听API。

具体修改方案： #

• 用on('value', callback)替代get()，该方法会在初始加载和数据每次变更时自动触发回调
• 在useEffect的返回函数中调用off()移除监听，避免组件卸载后产生内存泄漏
• 增加数据不存在的边界处理（比如快照为空时重置状态）

修改后的代码： #

const [rideRequest, setRideRequest] = useState({});

// RİDE REQUEST
useEffect(() => {
  // 定义数据变更的处理回调
  const handleDataUpdate = (snapshot) => {
    if (snapshot.exists()) {
      setRideRequest({ ...snapshot.val() });
    } else {
      setRideRequest({}); // 数据被删除时重置状态
    }
  };

  // 建立实时监听
  const targetRef = fireDb.child(`All Ride Requests/${id}`);
  targetRef.on('value', handleDataUpdate);

  // 组件卸载或id变更时清理监听
  return () => {
    targetRef.off('value', handleDataUpdate);
  };
}, [id]);

核心逻辑说明： #

• on('value')会持续监听指定节点的所有数据变更（新增、修改、删除操作都会触发）
• 返回函数中的off()必须和监听时的事件类型（'value'）、回调函数完全匹配，确保精准移除监听
• snapshot.exists()判断可以避免数据被删除后状态出现undefined的异常情况

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