React中如何将Firebase Realtime Database对象存入useState

云上老周

2026-10-5

问题原因

你碰到的setData看似没有生效的问题通常由以下几个原因导致：

React 的 useState 状态更新是异步操作，调用setData后立刻读取data变量，拿到的还是更新前的旧值，需要等待组件完成下一次重渲染才能获取到最新状态
你当前的 Firebase 监听逻辑没有包裹在useEffect钩子中，组件每次重渲染都会重复注册新的监听器，不仅会造成内存泄漏，还会触发异常的状态更新
如果 Firebase 对应路径下没有数据，snapshot.val()会返回null，赋值后data会变为null，如果你的后续逻辑默认data是对象也会出现异常，容易误以为更新失败

修复代码

import { useState, useEffect } from 'react'

// 组件内部逻辑
const [data, setData] = useState({})

useEffect(() => {
  const dbRef = firebase.database().ref()
  // 注册数据变化监听器
  const onDataChange = (snapshot) => {
    const result = snapshot.val()
    // 兼容空节点场景，无数据时保持初始空对象
    setData(result ?? {})
    // 此处的result就是即将存入data的最新值，可直接在此处做同步逻辑处理
  }
  // 错误监听，可排查权限、网络、路径错误
  const onDataError = (error) => {
    console.error('读取Firebase数据失败：', error)
  }

  dbRef.on('value', onDataChange, onDataError)

  // 组件卸载时移除监听器，避免内存泄漏
  return () => dbRef.off('value', onDataChange)
}, [])

// 组件重渲染后可在此处拿到最新的data，比如渲染到页面或做后续处理
console.log('当前最新data：', data)

验证方式