Firebase Firestore V9子集合文档数据获取问题：点击返回undefined

你的问题核心是点击事件中获取子任务文档的路径错误：子任务存储在projects/${projectId}/subtasks这个嵌套子集合里，但你在点击事件里直接访问根集合subtasks，导致找不到目标文档，返回undefined。

修正后的代码 #

const returnSubtasks = async () => {
  const list = document.querySelector('#taskList');
  const projectId = sessionStorage.getItem('projectId');
  const subtasksCollection = collection(db, `projects/${projectId}/subtasks`);
  const getSubTask = await getDocs(subtasksCollection);
  
  // 注意：QuerySnapshot永远不为null，用empty判断是否无文档
  if (getSubTask.empty) {
    list!.innerHTML = `<h4>No current Subtasks</h4>`;
  }
  getSubTask.forEach((doc) => {
    const { title, finished, description, user, timeSpent } = doc.data();
    const item = new ListItem(doc.id, title, finished, description, user, timeSpent);
    item.render();
  });

  const tasks = document.querySelectorAll('.subtaskItem');
  for (const task of tasks) {
    task.addEventListener('click', async (e: any) => {
      e?.stopPropagation();
      const taskId = task.getAttribute('id');
      // 关键：使用完整的嵌套子集合路径获取文档
      const taskDocRef = doc(db, `projects/${projectId}/subtasks`, taskId);
      const docs = await getDoc(taskDocRef);
      
      if (docs.exists()) {
        console.log(docs.data());
        // 这里添加跳转到详情页的逻辑
      } else {
        console.log("子任务文档不存在");
      }
    });
  }
};

关键修正说明 #

• 修复文档路径：将doc(db, 'subtasks', taskId)改为doc(db, projects/${projectId}/subtasks, taskId)，确保访问对应项目下的子集合文档。
• 修正空集合判断：用getSubTask.empty替代!getSubTask，因为getDocs返回的QuerySnapshot永远不会为null。
• 增加存在性校验：通过docs.exists()确认文档存在后再获取数据，避免无意义的报错。

建议渲染子任务卡片时，可将projectId和taskId以自定义属性（如data-project-id、data-task-id）绑定到元素上，后续点击时取值更可靠，也能规避sessionStorage的潜在问题。

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