React出现Maximum update depth exceeded错误 疑似Firebase更新导致集成失败

错误：Maximum update depth exceeded。当组件在componentWillUpdate或componentDidUpdate中反复调用setState时会触发该问题，React限制嵌套更新的数量以防止无限循环。

该错误与Firebase版本更新后的旧语法兼容问题叠加的场景下，90%以上是旧版Firebase实时监听函数的注册逻辑不符合React生命周期规范导致的无限渲染循环，可按以下步骤排查修复：

• 排查类组件监听函数注册位置
  禁止在render、componentDidUpdate生命周期中直接调用onValue、onSnapshot等Firebase实时监听方法，这类方法每次调用都会生成新的监听实例，触发数据回调时调用setState会触发重渲染，重渲染又会生成新的监听实例触发回调，形成无限循环。
  正确写法需要将监听注册逻辑放到componentDidMount中，同时保存监听返回的取消函数，在componentWillUnmount生命周期中执行清理：

  class FirebaseComponent extends React.Component {
    // 保存取消监听的函数
    firebaseUnsubscribe = null
    componentDidMount() {
      this.firebaseUnsubscribe = window.firebase.database()
        .ref('/your/data/path')
        .on('value', snapshot => {
          // 仅在监听回调中执行一次setState
          this.setState({ listData: snapshot.val() })
        })
    }
    componentWillUnmount() {
      // 组件卸载时销毁监听
      this.firebaseUnsubscribe?.()
    }
    render() {
      // 此处禁止写Firebase监听及setState逻辑
      return <div>{/* 业务渲染逻辑 */}</div>
    }
  }
  

• 函数组件写法规范
  禁止在组件顶层直接执行Firebase监听及setState，必须将逻辑封装在useEffect钩子中，同时返回清理函数销毁监听，依赖项数组仅传入不变的查询参数：

  import { useEffect, useState } from 'react'
  
  function FirebaseComponent() {
    const [listData, setListData] = useState([])
    useEffect(() => {
      const unsubscribe = window.firebase.database()
        .ref('/your/data/path')
        .on('value', snapshot => {
          setListData(snapshot.val())
        })
      // useEffect返回的函数会在组件卸载/依赖变化时执行，用于清理监听
      return () => unsubscribe()
    }, []) // 依赖项为空时仅在组件挂载时执行一次
    return <div>{/* 业务渲染逻辑 */}</div>
  }
  

• 锁定Firebase版本避免兼容问题
  如果确认代码逻辑无误，是Firebase版本自动升级导致的兼容问题，可以直接在package.json中锁定你之前正常使用的SDK版本，以8.x旧版本为例：

  {
    "dependencies": {
      "firebase": "8.10.0"
    }
  }
  

  修改后删除node_modules文件夹、package-lock.json/yarn.lock文件后重新执行安装命令即可。
• 快速排查验证
  临时注释所有Firebase相关的setState调用，若错误消失即可确定是监听逻辑导致的循环，再按上述方案调整即可。

内容的提问来源于stack exchange，提问作者Mostafa Nazmul Hasan