Firebase 9 + React开发中所有帖子错误显示当前用户信息，且Firebase Auth存储用户信息失败的求助

嗨，我仔细看了你的代码，发现两个核心问题导致了你遇到的麻烦，咱们一步步来解决：

一、所有帖子显示当前用户信息的问题 #

你现在渲染帖子的时候，直接用了当前登录用户的displayNamee和emaile，而不是从Firestore里每个帖子对应的发帖用户数据中读取。而且你存帖子的时候把用户信息包装成了对象（比如Name: { displayNamee }），这也导致后续读取数据的时候没法正确获取。

解决步骤：

1. 提交帖子时，直接把当前用户的昵称和邮箱以字符串形式存在Firestore文档里，不要嵌套对象
2. 渲染帖子时，从每个帖子的文档数据中取出对应的用户信息

二、Firebase Auth用户信息存储的问题 #

你的注册和登录逻辑里有几个小问题：

• 注册时updateProfile是异步操作，你没有加await，可能导致redux里的用户信息还没更新完成
• 登录时你用了输入框的Name值，但登录场景下用户不会填写昵称，应该从Firebase Auth返回的user对象里取displayName
• updateProfile不需要设置email，因为在createUserWithEmailAndPassword时已经把邮箱存在Auth里了

修改后的关键代码片段 #

1. Login组件的注册与登录函数

// 注册函数改成async，确保updateProfile完成后再dispatch
const Regsiter = async () => {
  if (!Name) {
    return alert("Please enter you full name");
  }
  try {
    const userCredential = await createUserWithEmailAndPassword(auth, Email, Password);
    const user = userCredential.user;
    // 等待用户昵称更新完成
    await updateProfile(user, {
      displayName: Name,
    });
    dispatch(
      login({
        uid: user.uid,
        displayName: user.displayName, // 用更新后的用户昵称
        email: user.email, // 用Auth中存储的邮箱
      })
    );
  } catch (error1) {
    alert(error1.message);
  }
};

// 登录函数，从Auth的user对象中取信息，而不是输入框的值
const loginToApp = async (e) => {
  e.preventDefault();
  try {
    const userCredential = await signInWithEmailAndPassword(auth, Email, Password);
    const user = userCredential.user;
    dispatch(
      login({
        email: user.email,
        uid: user.uid,
        userName: user.displayName,
      })
    );
  } catch (error1) {
    alert(error1.message);
  }
};

2. Feeds组件的帖子提交与渲染

// 提交帖子函数，正确存储用户信息，并且利用onSnapshot实时更新列表，不用手动getDocs
const Submitted = async (a) => {
  a.preventDefault();
  if (!enteredText.trim()) return; // 空内容不提交
  setEnteredText("");
  const postsCol = collection(db, "coll");
  await setDoc(doc(postsCol), {
    userName: displayNamee, // 直接存字符串
    userEmail: emaile,
    Postss: enteredText,
    timestamp: serverTimestamp(),
  });
};

// 渲染帖子时，从每个帖子的data中取出对应的用户信息
{Postfromfirebase.map(
  ({ id, data: { userName, userEmail, Postss } }) => (
    <Post
      key={id}
      names={userName}
      description={userEmail}
      postdata={Postss}
    />
  )
)}

3. Feeds组件的useEffect优化（实时监听+清理）

useEffect(() => {
  // 获取当前登录用户信息
  const auth = getAuth();
  const user = auth.currentUser;
  if (user !== null) {
    setdisplayName(user.displayName);
    setemail(user.email);
  }

  // 实时监听帖子集合变化，自动更新列表
  const colref = collection(db, "coll");
  const q = query(colref, orderBy("timestamp", "desc"));
  const unsubscribe = onSnapshot(q, (snapshot) => {
    setPostfromfirebase(
      snapshot.docs.map((doc) => ({
        id: doc.id,
        data: doc.data(),
      }))
    );
  });

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

这样修改后，应该就能解决你的两个问题了：每个帖子会显示发帖用户的昵称和邮箱，同时Firebase Auth里的用户信息也能正确存储和读取。如果还有其他问题，随时告诉我哦！

备注：内容来源于stack exchange，提问作者Goutam Sachdeva