Попытка сопоставить набор документов приводит к ошибке

Я создаю приложение для работы с firebase и typescript. У меня была эта функция, которая возвращает все проекты, которые текущий пользователь имеет в своем списке. но когда дело дошло до добавления в него информации, стало тяжело.

В конце концов я нахожу способ, но он все еще недостаточно хорош, но уж точно недостаточно чист и эффективен. Поэтому я использовал чат-бот для его оптимизации, и ответ был чистым и понятным, но я не могу понять, почему я получаю сообщение об ошибке:

Свойство «карта» не существует для типа «QuerySnapshot».

Я понятия не имею, что не так, так что, может быть, кто-нибудь из вас может указать на это ..?

Это функция:

const returnProjects = async (id:string) => {
  const array: string[] = [];
  const list = document.querySelector<HTMLDivElement>('#projectList');
  
  const projects = await getDocs(collection(db, 'projects'));
  const projectsUsersPromise = projects.map(async (doc: any) => ({
    users: await getCountFromServer(collection(db, `projects/${doc.id}/users`)),
    data: doc.data(),
  }));
  const projectsUsers = await Promise.all(projectsUsersPromise);
  
  projectsUsers.forEach((project: any) => {
    const amountUsers = project.users.data().count;
    const { name } = project.data();
    const newElement = document.createElement('div');
    if (list) list.appendChild(newElement).setAttribute('class', 'projectCard');
    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>
      `; 
  });
};

Ошибка говорит вам, что QuerySnapshot не имеет метода с именем map. Если вы хотите узнать, что может делать QuerySnapshot (он определенно не может делать карту), посмотрите справочник по API (и не полагайтесь на ИИ при написании кода). firebase.google.com/docs/reference/js/v8/…

Doug Stevenson 12.01.2023 02:55

Это так просто, скопируйте ошибку и вставьте ее в поисковую систему Google, и вы получите ответ. Все, не больше не меньше stack overflow с похожей ошибкой выскакивает в поиске google.

Mises 12.01.2023 03:03
Зод: сила проверки и преобразования данных
Зод: сила проверки и преобразования данных
Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...
Как заставить Remix работать с Mantine и Cloudflare Pages/Workers
Как заставить Remix работать с Mantine и Cloudflare Pages/Workers
Мне нравится библиотека Mantine Component , но заставить ее работать без проблем с Remix бывает непросто.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
TypeScript против JavaScript
TypeScript против JavaScript
TypeScript vs JavaScript - в чем различия и какой из них выбрать?
Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage
Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage
Не все нужно хранить на стороне сервера. Иногда все, что вам нужно, это постоянное хранилище на стороне клиента для хранения уникальных для клиента...
Что такое ленивая загрузка в Angular и как ее применять
Что такое ленивая загрузка в Angular и как ее применять
Ленивая загрузка - это техника, используемая в Angular для повышения производительности приложения путем загрузки модулей только тогда, когда они...
1
3
54
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Как упоминал @Doug Stevenson в соответствии с в этой ссылкеQuerySnapshot нет никакого метода карты. Если вы хотите использовать метод карты на projects, вы можете использовать projects.docs.map, тогда вы будете отображать через Array<QueryDocumentSnapshot<T>>, у которого есть метод карты.

В качестве альтернативы вы также можете использовать projects.forEach, но тогда вы потеряете накопление обещаний, подобных тому, что вы сделали на карте.

Вот обновленный код:

const returnProjects = async (id: string) => {
  const list = document.querySelector<HTMLDivElement>('#projectList');

  const projects = await getDocs(collection(db, 'projects'));
  const projectsPromises = projects.docs.map(async (doc: any) => {
    const users = await getCountFromServer(collection(db, `projects/${doc.id}/users`));
    const { name } = doc.data();
    return { name, users: users.data().count };
  });
  const projectsData = await Promise.all(projectsPromises);

  projectsData.forEach((project: any) => {
    const newElement = document.createElement('div');
    if (list) list.appendChild(newElement).setAttribute('class', 'projectCard');
    newElement.innerHTML = `
        <h4>${project.name}</h4>
        <div id='cardBottom'>
          <div id='cardUsers'>
            <img src='/src/img/user.svg' alt='Users' width='12vw' id='projectUsers'>
            <span>${project.users}</span>
          </div>
          <img src='/src/img/info.svg' alt='Further information about this project' width='15vw' id='projectInfo'>
        </div>`; 
  });
};

Я приветствую вас за помощь мне! респект вам

Stef-Verniers 12.01.2023 10:50

Другие вопросы по теме