在Next.js中如何通过user.uid访问Firestore指定文档及字段？

你遇到的Invalid collection reference错误，是因为用错了API：collection()是用来创建集合引用的，要求路径段数为奇数（比如Users是1段，Users/xxx/Posts是3段）；而Users/user.uid是2段路径，属于单个文档的路径，应该用doc()方法来创建引用。

下面是两种正确的实现方式：

方式一：用react-firebase-hooks实时监听用户文档 #

适合需要实时同步用户数据的场景：

import { useAuthState } from 'react-firebase-hooks/auth';
import { useDocument } from 'react-firebase-hooks/firestore';
import { auth, firestore } from '../firebase/config'; // 替换成你的firebase配置路径
import { doc } from 'firebase/firestore';

function UserInfo() {
  const [user] = useAuthState(auth);
  
  // 仅当用户登录后，创建对应uid的文档引用
  const userDocRef = user ? doc(firestore, "Users", user.uid) : null;
  // 监听文档变化
  const [snapshot, loading, error] = useDocument(userDocRef);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>加载失败：{error.message}</div>;
  if (!snapshot?.exists()) return <div>未找到用户文档</div>;

  const userData = snapshot.data();
  // 访问isAdmin字段
  console.log('用户权限：', userData.isAdmin);

  return (
    <div>
      <p>用户ID：{user.uid}</p>
      <p>是否为管理员：{userData.isAdmin ? '是' : '否'}</p>
    </div>
  );
}

export default UserInfo;

方式二：一次性获取用户文档 #

适合只需要加载一次数据的场景：

import { useAuthState } from 'react-firebase-hooks/auth';
import { firestore } from '../firebase/config';
import { doc, getDoc } from 'firebase/firestore';
import { useEffect, useState } from 'react';

function UserProfile() {
  const [user] = useAuthState(auth);
  const [userData, setUserData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const getUserData = async () => {
      if (!user) {
        setLoading(false);
        return;
      }
      try {
        // 创建文档引用
        const userDoc = doc(firestore, "Users", user.uid);
        const docSnap = await getDoc(userDoc);
        
        if (docSnap.exists()) {
          setUserData(docSnap.data());
        } else {
          console.log("该用户的文档不存在");
        }
      } catch (err) {
        console.error("获取用户数据出错：", err);
      } finally {
        setLoading(false);
      }
    };

    getUserData();
  }, [user]);

  if (loading) return <div>加载中...</div>;
  if (!userData) return <div>无用户数据</div>;

  return <div>是否管理员：{userData.isAdmin ? '是' : '否'}</div>;
}

关键注意点 #

• 必须判断user是否存在后再创建文档引用，避免user.uid为undefined导致的路径错误
• 明确collection()和doc()的区别：前者指向集合，后者指向单个文档

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