为何组件在Firebase认证条件块中不渲染但单独可正常显示？

核心问题 #

你代码里的问题出在直接在JSX中调用onAuthStateChanged：

• onAuthStateChanged是Firebase的异步订阅方法，它的回调函数只会在auth状态变化时触发，并非同步返回组件，因此JSX无法捕获回调里的<AddProperty/>或<Login/>并渲染。
• 每次组件渲染都会重复调用onAuthStateChanged，会创建多个无效订阅，还可能引发内存泄漏。

修复后的代码 #

通过React的状态钩子管理用户登录状态，配合副作用钩子处理auth订阅：

import Head from "next/head";
import { auth } from "../../components/firebase";
import { onAuthStateChanged } from "firebase/auth";
import Login from "../Login";
import AddProperty from "../../components/AddProperty";
import { useState, useEffect } from "react";

const Properties = () => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 订阅auth状态变化
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
      setLoading(false);
    });

    // 组件卸载时取消订阅，避免内存泄漏
    return () => unsubscribe();
  }, []);

  // 处理初始化加载状态
  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <>
      <Head>
        <title>Add Property</title>
        <meta name="keywords" content="web dev" />
      </Head>
      <h1>Add Property</h1>
      <p>Welcome to the add Property new</p>

      {/* 根据用户状态渲染对应组件 */}
      {user ? <AddProperty /> : <Login />}
    </>
  );
};

export default Properties;

关键说明 #

• 用useState存储当前用户和加载状态，确保组件能响应登录状态变化自动重新渲染。
• useEffect中执行onAuthStateChanged订阅，并在组件卸载时调用返回的unsubscribe清理订阅。
• 增加loading状态是因为onAuthStateChanged的首次回调是异步的，避免初始渲染时出现内容闪烁或逻辑错误。

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