Введите "Promise<QuerySnapshot>" должен иметь метод " [Symbol.iterator] ()", который возвращает итератор

# #reactjs #firebase #google-cloud-firestore #next.js

Вопрос:

Я работаю над проектом Firebase, используя NextJS и Typescript. Я пытаюсь извлечь данные из базы данных Firestore и получаю эту ошибку Type 'Promiselt;QuerySnapshotlt;DocumentDatagt;gt;' must have a '[Symbol.iterator]()' method that returns an iterator.

Вот код, который я использую для извлечения данных из БД

 const postsRef = collection(db, "discussions"); query(postsRef, orderBy("createdAt"), limit(20)); const [posts] = getDocs(postsRef)

Ответ №1:

Ваш getDocs не возвращает массив, поэтому вы получаете эту ошибку. A QuerySnapshot -это пользовательский тип базы данных, который имеет forEach (похож на массив), но не является массивом. Поэтому вам нужно повторить его, используя forEach :

 const postsRef = collection(db, "discussions"); query(postsRef, orderBy("createdAt"), limit(20)); // I'm guessing you need await here too? const postDocs = await getDocs(postsRef)  let posts = [] postDocs.forEach((postDoc) =gt; {  posts = [...posts, {  ...postDoc.data(),  id: postDoc.id,  }] })

1. Я вставил код, и я получаю эту ошибку Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

2. Это не связано с этим кодом. Эта новая ошибка является ошибкой react, в которой говорится, что вы пытаетесь передать обещание или объект в качестве компонента react, но вы не можете этого сделать. В любом случае, это новая проблема, о которой вы должны спросить, и вам нужно будет опубликовать больше кода, потому что он не связан с кодом Firebase, который вы опубликовали (по крайней мере, не напрямую — для отладки требуется часть вашего кода реакции).

3. @I’Mjoetoo Звучит так, как будто OP добавляет этот код в свой компонент вместо того, чтобы заключать его в useEffect / useAsync / useAsyncEffect .