import React, { useEffect, useState } from "react"; import { View, Text, StyleSheet, Image, FlatList } from "react-native"; import PostComponent from "../../Components/PostComponent"; import { db } from "../../firebase"; import { collection, query, getDocs, orderBy, doc, getDoc, } from "firebase/firestore"; const postData = []; const firstData = []; async function getPosts() { const q = query(collection(db, "Posts"), orderBy("postTime")); const querySnapshot = await getDocs(q); querySnapshot.forEach((postDatas) => { const dataPost = postDatas.data(); firstData.push({ id: postDatas.id, dataPost }); }); } const getUserDetails = async (a, b) => { const docRef = doc(db, "Users", a.creator); const docSnap = await getDoc(docRef); if (docSnap.exists()) { const userDetails = docSnap.data(); postData.push({ id: b, ...a, ...userDetails }); console.log("1st: " + postData); } else { console.log("No such document!"); } }; function Posts() { const [loading, setLoading] = useState(true); useEffect(() => { getPosts() .then(() => { console.log("Get Posts Complete"); console.log(firstData.length); firstData.forEach((a) => getUserDetails(a.dataPost, a.id)); }) .then(() => console.log("2nd " + postData)) .catch((e) => console.log(e)); }, []); const renderPosts = ({ item }) => <PostComponent />; if (loading) { getPosts(); return <Text>Loading Posts</Text>; } return ( <View> <FlatList data={postData} renderItem={renderPosts} /> </View> ); } const styles = StyleSheet.create({}); export default Posts;

Me refiero al código de arriba.

Lo que estoy tratando de lograr es recuperar documentos de la colección de usuarios en función del resultado de las colecciones de publicaciones. Sin embargo, quiero el console.log("1st: " + postData); en la función getUserDetails para ejecutar antes de console.log("2nd " + postData) . Pero cada vez que ejecuto el código, el segundo se ejecuta antes que el primero. Esto es un dilema para mí, ya que pensé que then suponía que el primero then ejecutaría por completo antes de pasar al segundo. Por favor ayuda