Next.js Firebase路由出现React无限重渲染错误排查求助

一、第一个代码的无限循环问题 #

问题原因 #

组件函数体中直接执行setMemberID，每一次组件渲染都会触发该代码块，调用setMemberID后又会引发组件重新渲染，形成无限循环，最终触发React的渲染次数限制错误。

修复代码 #

'use client';

import React, { useState, useEffect } from "react";
import firebase from "../../firebase/initFirebase";
import DrillManage from '../components/drillMng'

export default function MemberPage() {
  const [memberID, setMemberID] = useState("");
  const [userID, setUserID] = useState("");

  // 将路径解析逻辑放入useEffect，仅在组件挂载时执行
  useEffect(() => {
    const currentMemberID = window.location.pathname.substring(1);
    setMemberID(currentMemberID);
  }, []);

  useEffect(() => {
    // 避免memberID为空时发起无效请求
    if (!memberID) return;
    
    const dbRef = firebase.database().ref('Members');
    dbRef.child(memberID)
      .once('value', (snapshot) => {
        // 正确获取Firebase快照中的值
        const usrID = snapshot.child('UserID').val();
        setUserID(usrID || "");
      });
  }, [memberID]);

  return (
    <DrillManage usrID={userID} />
  )
}

二、第二个代码的userID无法设置问题 #

问题原因 #

1. 客户端组件标记了async，导致渲染逻辑异常；
2. 获取Firebase数据时错误序列化快照对象，未使用.val()提取实际值；
3. memberID未同步pathname的变化，初始赋值方式无法响应路径更新。

修复代码 #

'use client';

import React, { useState, useEffect } from "react";
import firebase from "../../firebase/initFirebase";
import DrillManage from '../components/drillMng'
import { usePathname } from 'next/navigation'

export default function MemberPage() {
  const [userID, setUserID] = useState("");
  const pathname = usePathname();
  const [memberID, setMemberID] = useState("");

  // 监听pathname变化，同步更新memberID
  useEffect(() => {
    const currentMemberID = pathname.substring(1);
    setMemberID(currentMemberID);
  }, [pathname]);

  useEffect(() => {
    if (!memberID) return;
    
    const dbRef = firebase.database().ref('Members');
    dbRef.child(memberID)
      .once('value', (snapshot) => {
        const usrID = snapshot.child('UserID').val();
        console.log('usrID=', usrID);
        setUserID(usrID || "");
      });
  }, [memberID]);

  return (
    <DrillManage usrID={userID} />
  )
}

关键注意事项 #

• 禁止在组件函数体（hooks外）直接调用setState，否则必然引发无限渲染；
• Next.js客户端组件不能使用async关键字，会破坏客户端渲染逻辑；
• Firebase Realtime Database必须通过.val()方法提取快照中的实际数据，直接序列化快照对象无法获取有效值；
• 使用usePathname时，需通过useEffect监听其变化来同步更新关联状态，避免初始值不稳定的问题。

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