useEffect未执行引发变量未定义问题求助（useRouter+Firebase场景）

核心问题 #

你的代码存在几个关键问题导致useEffect未正确触发，以及渲染时出现未定义错误：

1. useEffect依赖不全：依赖数组仅包含loading，但router.isReady、router.query、user这些影响逻辑的变量未加入，导致状态变化时useEffect无法重新执行。
2. useEffect内返回JSX无效：useEffect的回调函数不能返回React元素，只能返回清理函数，你写的return <div>Authenticating</div>完全不起作用。
3. 未处理room为空的情况：初始room是undefined，直接访问room.guests.numberOfGuests会触发类型错误。
4. 多余的变量声明：currentUserUID可以直接用user?.uid替代，没必要单独声明let变量。

修复后的代码 #

const CheckIn = () => {
  const [room, setRoom] = useState(null);
  const auth = getAuth(app);
  const [user, loading] = useAuthState(auth);
  const router = useRouter();
  const request = router.query;

  useEffect(() => {
    const fetchRoomData = async () => {
      // 等待路由就绪且用户认证完成
      if (!router.isReady || loading || !user) return;

      console.log("Useffect has ran");
      try {
        const roomRef = collection(db, user.uid.toString());
        const dataQuery = query(
          roomRef,
          where(documentId(), "==", request.roomID?.toString())
        );
        const querySnapshot = await getDocs(dataQuery);
        
        const docs = querySnapshot.docs.map((doc) => ({
          ...doc.data(),
          id: doc.id
        }));

        setRoom(docs[0] || null);
      } catch (error) {
        console.error("获取房间数据失败:", error);
      }
    };

    fetchRoomData();
  }, [router.isReady, loading, user, request.roomID]); // 加入所有相关依赖

  // 处理加载状态
  if (loading || !router.isReady) {
    return <div>Authenticating</div>;
  }

  // 处理room为空的情况
  if (!room) {
    return <div>房间数据加载中或不存在</div>;
  }

  return (
    <>
      <Head>
        Check In
      </Head>
      <div className="grid grid-cols-12 full-h">
        <NavigationBar />
        <div className="col-span-10">
          <div>
            <h1>Check In for {room.guests.numberOfGuests}</h1>
          </div>
          <div className="grid grid-cols-2 gap-6 "></div>
        </div>
      </div>
    </>
  );
};

export default CheckIn;

关键修复点说明 #

• 完善依赖数组：将router.isReady、user、request.roomID加入useEffect依赖，确保这些状态变化时能触发数据获取。
• 拆分异步逻辑：把异步逻辑抽成单独函数，避免useEffect直接返回异步函数，代码结构更清晰。
• 前置状态判断：在组件return前先处理加载、路由未就绪、room为空的情况，避免渲染时访问未定义属性。
• 添加错误捕获：用try/catch包裹Firebase请求，避免异步错误导致页面崩溃。
• 安全访问路由参数：对request.roomID使用可选链?.，防止参数不存在时报错。

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