如何在React Js中使用Firebase 9读取集合中单个用户的文档

实现步骤 #

• 监听Firebase用户认证状态，获取当前登录用户的UID
• 通过UID定位Firestore中对应用户的文档
• 读取文档中的displayName并渲染到页面

完整代码示例 #

1. Firebase配置文件 #

// firebaseConfig.js
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

// 替换成你的Firebase配置
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);

2. 用户信息组件 #

// UserProfile.jsx
import { useState, useEffect } from "react";
import { auth, db } from "./firebaseConfig";
import { doc, getDoc } from "firebase/firestore";

const UserProfile = () => {
  const [displayName, setDisplayName] = useState("");
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 监听用户登录状态变化
    const unsubscribe = auth.onAuthStateChanged(async (currentUser) => {
      if (currentUser) {
        // 定位到当前用户的文档（假设集合名为users）
        const userDocRef = doc(db, "users", currentUser.uid);
        const userDocSnapshot = await getDoc(userDocRef);

        if (userDocSnapshot.exists()) {
          // 读取文档中的displayName
          setDisplayName(userDocSnapshot.data().displayName);
        } else {
          console.error("未找到对应用户的文档");
        }
      } else {
        // 用户未登录，清空状态
        setDisplayName("");
      }
      setIsLoading(false);
    });

    // 组件卸载时取消监听
    return () => unsubscribe();
  }, []);

  if (isLoading) {
    return <div>加载中...</div>;
  }

  return (
    <div className="user-profile">
      {displayName ? (
        <h3>欢迎回来，{displayName}！</h3>
      ) : (
        <p>请登录以查看个人信息</p>
      )}
    </div>
  );
};

export default UserProfile;

关键注意事项 #

• Firestore安全规则：必须配置规则确保用户只能读取自己的文档，避免权限问题：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId} {
      allow read, write: if request.auth != null && request.auth.uid == userId;
    }
  }
}

• 注册时同步文档：用户注册成功后，要将displayName等信息写入Firestore的users集合，对应文档ID为用户UID，否则读取时会找不到文档。

内容的提问来源于stack exchange，提问作者CLEAR DESIGN WEBS