如何获取Firebase嵌套数组并展示当前登录用户的待办事项

根据你的数据结构和需求，核心是从users集合中当前登录用户的文档里读取todos数组，而不是从全局的todos集合取数据。以下是修改后的完整代码和关键说明：

修改后的代码 #

import { doc, getDoc } from "firebase/firestore";
import { getAuth, onAuthStateChanged } from "firebase/auth";
import { useState, useEffect } from "react";

// 组件内代码
const auth = getAuth();
const [currentUser, setCurrentUser] = useState(null);
const [newTodos, setNewTodos] = useState([]);

useEffect(() => {
  // 监听用户登录状态变化，确保拿到有效uid
  const unsubscribe = onAuthStateChanged(auth, (user) => {
    setCurrentUser(user);
  });
  return unsubscribe; // 组件卸载时取消监听
}, []);

useEffect(() => {
  if (!currentUser) {
    setNewTodos([]); // 用户未登录时清空待办列表
    return;
  }

  const getUserTodos = async () => {
    // 定位到当前用户在users集合中的专属文档
    const userDocRef = doc(db, "users", currentUser.uid);
    const userDocSnapshot = await getDoc(userDocRef);

    if (userDocSnapshot.exists()) {
      const userData = userDocSnapshot.data();
      // 取出todos数组并按importance降序排序（和原逻辑保持一致）
      const sortedTodos = [...(userData.todos || [])].sort((a, b) => b.importance - a.importance);
      setNewTodos(sortedTodos);
    } else {
      setNewTodos([]); // 用户文档不存在时清空列表
    }
  };

  getUserTodos();
}, [currentUser]); // 依赖currentUser，登录状态变化时自动重新获取数据

关键修改点说明 #

• 用户状态监听：用onAuthStateChanged实时监听登录状态，避免未登录时出现无效uid的错误。
• 数据引用调整：不再使用全局todos集合，而是通过doc(db, "users", currentUser.uid)直接定位到当前用户的文档。
• 排序逻辑保留：取出todos数组后手动按importance降序排序，和原代码的展示逻辑对齐。
• 边界情况处理：增加了未登录、用户文档不存在的分支，保证页面状态稳定。

如果需要实时同步待办事项的更新（比如添加/修改后自动刷新列表），可以把getDoc换成实时监听的onSnapshot：

const getUserTodos = () => {
  const userDocRef = doc(db, "users", currentUser.uid);
  const unsubscribe = onSnapshot(userDocRef, (docSnapshot) => {
    if (docSnapshot.exists()) {
      const userData = docSnapshot.data();
      const sortedTodos = [...(userData.todos || [])].sort((a, b) => b.importance - a.importance);
      setNewTodos(sortedTodos);
    } else {
      setNewTodos([]);
    }
  });
  return unsubscribe;
};

// 在useEffect中调用并返回监听取消函数
useEffect(() => {
  if (!currentUser) {
    setNewTodos([]);
    return;
  }
  const unsubscribe = getUserTodos();
  return unsubscribe;
}, [currentUser]);

内容的提问来源于stack exchange，提问作者Luka Miljković