La primera función llamada es addPostHandler, que está llamando a la función storeImage. Dentro de la función storeImage, postData.postImage es una matriz de cadenas (imágenes convertidas en base64). Lo que estoy tratando de hacer aquí es mapear todas las imágenes en postData.postImage y luego cargarlas en Firestore, luego obtener la URL de descarga e insertarla en imageUrl. Después de terminar de cargar todas las imágenes y obtener la URL, al final quiero que se ejecute console.log("Imprimiendo...").
El error es que la función storeImage está devolviendo una cadena vacía en lugar de downloadUrl.
const index = () => { const storeImage = async (postData: PostType) => { const imageUrl: string[] = []; const storage = getStorage(); postData.postImage.map((image, i) => { const storageRef = ref( storage, `ImagesOfPosts/${postData.userId}/${postData.postId}/image ${i}` ); uploadString(storageRef, image, "data_url", { contentType: "image/jpg", }).then(() => { getDownloadURL(storageRef) .then((result) => { imageUrl.push(result); }) .catch((error) => { console.error(error); }); }); }); console.log(imageUrl); return imageUrl; }; const addPostHandler = async (enteredPostData: PostType) => { const imageUrl = await storeImage(enteredPostData); console.log("Printing......."); }Su código de nivel superior no está esperando hasta que finalice la carga y la obtención de la URL de descarga, por lo que verá que devuelve una matriz vacía.
Como está cargando varias imágenes, deberá usar Promise.all() para resolver storeImage solo cuando todas las imágenes estén listas.
En total será algo como:
const storeImage = async (postData: PostType) => { const storage = getStorage(); const imageUrl = Promise.all(postData.postImage.map((image, i) => { const storageRef = ref( storage, `ImagesOfPosts/${postData.userId}/${postData.postId}/image ${i}` ); return uploadString(storageRef, image, "data_url", { contentType: "image/jpg", }).then(() => { return getDownloadURL(storageRef); }); }); return imageUrl; };