Firebase 9对应旧版获取用户Bio代码的语法转换求助

转换后的完整代码 #

首先确保已正确导入Firestore的模块化函数：

import { doc, getDoc } from "firebase/firestore";

修改后的setupUI函数：

const setupUI = (user) => {
  if (user) {
    // 获取用户文档引用并查询数据
    const userDocRef = doc(db, 'users', user.uid);
    getDoc(userDocRef).then((docSnap) => {
      if (docSnap.exists()) {
        const userData = docSnap.data();
        const html = `
          <div>Logged in as ${user.email}</div>
          <div>${userData.bio || '未填写个人简介'}</div>
        `;
        accountDetails.innerHTML = html;
      } else {
        // 用户文档不存在时的提示
        const html = `
          <div>Logged in as ${user.email}</div>
          <div>暂无个人信息</div>
        `;
        accountDetails.innerHTML = html;
      }
    }).catch((error) => {
      console.error('获取用户信息失败:', error);
    });

    // 切换登录/登出UI元素显示状态
    loggedInLinks.forEach(item => item.style.display = 'block');
    loggedOutLinks.forEach(item => item.style.display = 'none');
  } else {
    // 清空账户信息，切换UI状态
    accountDetails.innerHTML = '';
    loggedInLinks.forEach(item => item.style.display = 'none');
    loggedOutLinks.forEach(item => item.style.display = 'block');
  }
};

核心修改说明 #

• 模块化API调用：Firebase 9不再支持旧版的链式调用（db.collection().doc().get()），必须使用doc()创建文档引用，再传入getDoc()获取单文档数据。
• 文档存在性校验：添加docSnap.exists()判断，避免因用户文档不存在导致docSnap.data()返回undefined，进而出现undefined.bio的错误。
• 异常捕获：新增catch块捕获请求异常，方便排查网络或权限类问题。
• 默认值处理：给userData.bio设置默认文本，避免字段不存在时页面显示undefined。

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