Firebase+TypeScript开发Todo应用时map调用QuerySnapshot报错求助

嘿，这个问题我之前也碰到过！你遇到的Property 'map' does not exist on type 'QuerySnapshot'错误，原因很简单：Firebase的getDocs返回的不是数组，而是一个QuerySnapshot对象——它是查询结果的包装器，真正的文档数组藏在它的docs属性里。

错误根源拆解 #

你当前代码里的这一行：

const projectsUsersPromise = projects.map(async (doc: any) => ({

这里的projects是QuerySnapshot实例，它本身没有map方法。你需要访问它的docs属性，这个属性才是包含所有查询到的文档的数组，数组才支持map操作。

修正后的完整代码 #

我帮你把代码修正了，还加上了TypeScript的类型定义（尽量避免用any，让代码更严谨）：

// 先定义类型，让TS更友好
interface ProjectData {
  name: string;
  // 可以根据你项目的实际字段扩展
}

const returnProjects = async (id: string) => {
  const array: string[] = [];
  const list = document.querySelector<HTMLDivElement>('#projectList');
  
  const projectsSnapshot = await getDocs(collection(db, 'projects'));
  // 关键：使用projectsSnapshot.docs来获取文档数组
  const projectsUsersPromise = projectsSnapshot.docs.map(async (doc) => ({
    users: await getCountFromServer(collection(db, `projects/${doc.id}/users`)),
    data: doc.data() as ProjectData, // 断言为我们定义的类型
  }));
  const projectsUsers = await Promise.all(projectsUsersPromise);
  
  projectsUsers.forEach((project) => {
    const amountUsers = project.users.data().count;
    const { name } = project.data;
    const newElement = document.createElement('div');
    newElement.setAttribute('class', 'projectCard'); // 先设置class再append更清晰
    if (list) list.appendChild(newElement);
    
    newElement.innerHTML = `
        <h4>${name}</h4>
        <div id='cardBottom'>
          <div id='cardUsers'>
            <img src='/src/img/user.svg' alt='Users' width='12vw' id='projectUsers'>
            <span>${amountUsers}</span>
          </div>
          <img src='/src/img/info.svg' alt='Further information about this project' width='15vw' id='projectInfo'>
        </div>
      `; 
  });
};

额外小提示 #

• 给doc.data()加上类型断言（as ProjectData），可以让TS自动提示项目字段，避免拼写错误。
• 把设置class的操作提前到appendChild之前，代码逻辑更顺，虽然原来的写法也能运行，但可读性更好。

这样修改后，你的map方法就能正常工作，那个TS错误也会消失啦！

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