React组件中优化Firestore数据获取：避免getDoc重复调用

{user && !loading && (handleProfile(), (...))}

import React, { useContext, useState, useEffect } from 'react';
import { doc, getDoc } from 'firebase/firestore'; // 确保 FIREBASE_FIRESTORE 已正确导入
import { useRouter } from 'next/router';
import Image from 'next/image';
import { FiChevronUp, FiChevronDown } from 'react-icons/fi';

// 假设 authContext 和 FIREBASE_FIRESTORE 在应用的其他地方已定义并导出
// import { authContext } from '../contexts/AuthContext';
// import { FIREBASE_FIRESTORE } from '../firebaseConfig';

export default function Profile() {
  const { user, loading } = useContext(authContext);
  const [profile, setProfile] = useState({});
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const router = useRouter();

  useEffect(() => {
    // 异步函数用于封装 Firestore 数据获取逻辑
    const fetchUserProfile = async () => {
      // 确保用户对象存在且UID可用，避免在用户未登录或UID为空时尝试获取数据
      if (user && user.uid) {
        const userProfileRef = doc(FIREBASE_FIRESTORE, "user", user.uid);
        try {
          const userProfileSnap = await getDoc(userProfileRef);
          if (userProfileSnap.exists()) {
            setProfile(userProfileSnap.data());
            console.log("用户数据已成功设置");
          } else {
            console.warn("用户文档不存在或已删除。UID:", user.uid);
            setProfile({}); // 清空或设置为默认值，以防之前有旧数据
          }
        } catch (error) {
          console.error("获取用户数据失败:", error);
          // 可以在此处设置错误状态，向用户显示错误信息
        }
      } else if (!loading && !user) {
        // 如果用户未登录且加载状态已结束，则重定向到登录页
        // 注意：在 useEffect 中进行路由跳转通常是安全的，但需确保 router 稳定
        router.push("/");
      }
    };

    fetchUserProfile(); // 调用数据获取函数

    // 依赖数组包含 'user'。这意味着只有当 'user' 对象发生变化时，
    // useEffect 内部的 'fetchUserProfile' 才会重新执行。
    // 'loading' 和 'router' 也应包含在内，因为它们在副作用中使用。
  }, [user, loading, router]); // 依赖项：user、loading、router

  // 在组件渲染逻辑中，不再直接调用 handleProfile()
  // 而是根据状态来渲染UI

  if (loading) {
    return <div>加载用户数据中...</div>; // 显示加载指示
  }

  // 如果用户未登录且加载完成，则不再渲染组件内容，等待useEffect中的重定向
  if (!user) {
    return null;
  }

  return (
    <div className="flex flex-col relative">
      <button
        onClick={() => setDropdownOpen((prev) => !prev)}
        className="flex items-center gap-2.5 focus:ring-0"
      >
        <Image
          placeholder="blue"
          alt="user profile"
          src={profile.image_URL || '/default-avatar.png'} // 提供默认图片以防 profile.image_URL 为空
          height={48}
          width={48}
          className="rounded-full bg-gray-400"
        />
        <div className="flex flex-col text-left">
          <p className="font-semibold">{profile.name || '未知用户'}</p>
          <p className="text-gray-400 text-sm">{profile.email || '无邮箱'}</p>
        </div>
        {dropdownOpen ? (
          <FiChevronUp size={"20px"} color={"gray"} />
        ) : (
          <FiChevronDown size={"20px"} color={"gray"} />
        )}
      </button>
      <div>{dropdownOpen && <UserDropdown />}</div>
    </div>
  );
}