如何借助Firebase Auth与Firestore获取用户信息并展示在帖子信息流？

核心问题分析 #

你存储的UserID是用户的uid字符串，并非Firebase Auth的用户对象，所以直接通过doc.UserID.displayName调用用户属性必然失败。前端无法直接通过Auth API获取其他用户的信息（Auth的getUser接口需要管理员权限，仅支持后端调用），因此需要将用户信息同步到Firestore，再通过UserID关联查询。

实现步骤 #

1. 同步用户信息到Firestore

创建users集合，将Auth中的用户信息（displayName、photoURL等）同步到该集合，文档ID使用用户uid。这样可以实时捕获用户信息的变更：

// 同步用户信息到Firestore
const syncUserToFirestore = (user) => {
  if (!user) return;
  const userRef = doc(db, 'users', user.uid);
  // 使用merge: true只更新变更字段，避免覆盖已有数据
  setDoc(userRef, {
    displayName: user.displayName,
    photoURL: user.photoURL,
    email: user.email
  }, { merge: true });
};

// 监听用户认证状态变化，同步信息
onAuthStateChanged(auth, syncUserToFirestore);
// 监听用户信息更新（如修改昵称、头像）
onIdTokenChanged(auth, syncUserToFirestore);

2. 修复帖子渲染逻辑

修改renderPosts函数，通过帖子中的UserID关联Firestore的用户文档，并监听用户文档变化以实现实时更新：

const renderPosts = (posts) => {
  const main = document.getElementById("feed");

  onSnapshot(posts, (snapshot) => {
    main.innerHTML = ''; // 清空旧内容，避免重复渲染
    snapshot.docs.forEach((doc) => {
      const postData = { ...doc.data(), id: doc.id };
      const userId = postData.UserID;
      const userRef = doc(db, 'users', userId);

      // 监听用户文档变化，实时更新帖子中的用户信息
      onSnapshot(userRef, (userDoc) => {
        const userData = userDoc.exists() ? userDoc.data() : {};
        // 创建帖子卡片
        const card = document.createElement('div');
        card.className = 'post-card';
        card.setAttribute('data-post-id', postData.id);
        card.innerHTML = `
          <div class="post-header">
            <img src="${userData.photoURL || './default-avatar.png'}" alt="${userData.displayName || '匿名用户'}" class="avatar">
            <span class="username">${userData.displayName || '匿名用户'}</span>
          </div>
          <div class="post-content">
            <h3 class="title">${postData.title}</h3>
            <p class="description">${postData.description}</p>
            <a href="${postData.beatURL}" target="_blank" class="beat-link">查看Beat</a>
          </div>
        `;
        main.appendChild(card);
      });
    });
  });
};

3. 修正initApp中的错误

collection函数无需await，它仅创建集合引用，不是异步操作；同时确保正确调用初始化函数：

export const initApp = () => {
  initFirebaseAuth(); // 确保是函数调用
  const posts = collection(db, 'Posts');
  return renderPosts(posts);
};

关键说明 #

• 无需创建与Auth存储的引用，而是通过将用户信息同步到Firestore，实现帖子与用户数据的关联。
• 监听用户文档的onSnapshot可以确保用户信息变更时，信息流中的内容实时更新，满足你的需求。

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