React+TypeScript中Firestore查询出现未捕获Promise的undefined错误排查

问题原因分析 #

• 代码仅创建了查询对象，未实际执行查询请求获取数据，无法得到房间结果。
• currentUser.uid可能未初始化（比如用户认证状态未完成加载），直接访问会触发undefined错误。
• 未对异步操作做异常捕获，导致Promise错误未被处理。

修复后的代码示例 #

import { collection, query, where, getDocs } from "firebase/firestore";

const GetRooms = async () => {
  // 先校验用户身份是否已加载
  if (!currentUser?.uid) {
    console.log('用户信息未加载完成，请稍后重试');
    return [];
  }

  try {
    const roomsRef = collection(db, 'Rooms');
    const userRoomsQuery = query(
      roomsRef,
      where('users', 'array-contains', currentUser.uid)
    );
    // 执行查询并获取结果快照
    const querySnapshot = await getDocs(userRoomsQuery);
    // 提取房间名称：如果名称是文档ID用doc.id，是文档内字段则用doc.data().name
    const roomNames = querySnapshot.docs.map(doc => doc.id);
    
    console.log('符合条件的房间:', roomNames);
    return roomNames;
  } catch (error) {
    console.error('获取房间失败:', error);
    // 可根据业务需求处理错误，比如提示用户
    return [];
  }
};

关键修复点说明 #

1. 用户身份校验：通过currentUser?.uid可选链操作，避免用户未登录/身份未加载时的undefined错误。
2. 执行查询：使用await getDocs(userRoomsQuery)实际发起Firestore请求，获取查询结果。
3. 异常捕获：用try/catch包裹异步操作，捕获并处理查询过程中的错误，避免未捕获Promise异常。
4. 提取房间名称：根据实际数据结构选择提取文档ID或文档内的名称字段（比如doc.data().name）。

额外优化建议 #

• 监听认证状态：如果currentUser来自Firebase Auth，建议通过onAuthStateChanged监听用户状态，确保身份稳定后再执行查询：

  import { getAuth, onAuthStateChanged } from "firebase/auth";
  
  const auth = getAuth();
  onAuthStateChanged(auth, async (user) => {
    if (user) {
      // 用户已登录，安全执行房间查询
      const userRooms = await GetRooms();
      // 渲染房间列表等操作
    } else {
      // 用户未登录，处理未授权逻辑
    }
  });
  

• 实时数据监听：如果需要房间数据实时更新，可替换getDocs为onSnapshot：

  const unsubscribe = onSnapshot(userRoomsQuery, (snapshot) => {
    const roomNames = snapshot.docs.map(doc => doc.id);
    console.log('实时房间数据:', roomNames);
  }, (error) => {
    console.error('实时监听失败:', error);
  });
  // 组件卸载时取消监听
  // unsubscribe();
  

• 权限校验：确保Firestore安全规则允许当前用户读取Rooms集合的文档，例如：

  match /Rooms/{roomId} {
    allow read: if request.auth != null && request.auth.uid in resource.data.users;
  }
  

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