Estoy creando un formulario donde el usuario necesita ingresar información para crear un documento de ciudad. El usuario también necesita cargar varias fotos de la ciudad. Al enviar el formulario, se crea un nuevo documento de la ciudad en firestore, luego cada foto se carga en el almacenamiento de firebase asociado y, finalmente, se agrega un nuevo campo llamado photosURLs con todas las URL de las fotos al documento de la ciudad.
Aquí está mi código:
async function addDocument() { const docRef = await addDoc(collection(db, "cities"), { name: "Tokyo", country: "Japan" }); return docRef } async function UploadMultiplePhotos(docRef) { var photos = [] for (var i = 0; i < files.value.length; i++) { // files.values contains all the files objects const file = files.value[i]; refStorageFunction( storage, "cities/" + docRef.id + "/" + file.name ); uploadBytes(storageRef, file).then((snapshot) => { getDownloadURL(snapshot.ref).then((downloadURL) => { photos.push(downloadURL) }); }); } return Promise.resolve(photos) } async function updateDocument(docRef, photos) { await updateDoc(docRef, { photosURLs: photos }); } function createCity() { addDocument().then((docRef) => { UploadMultiplePhotos(docRef).then((photos) => { updateDocument(docRef, photos).then(() => { router.push($CITY_PATH) }) }) }) } Mi problema es que el campo photosURLs resultante en el documento de la ciudad está vacío. Parece que mi función UploadMultiplePhotos no espera a que la matriz de photos se complete por completo.
Si establece puntos de interrupción y ejecuta el código en un depurador, o agrega algunas declaraciones de registro bien ubicadas, verá que su return Promise.resolve(photos) se ejecuta antes de que se llame a photos.push(downloadURL) : así que siempre se resuelve con una matriz vacía.
Una solución simple es usar await en lugar de then() :
async function UploadMultiplePhotos(docRef) { var photos = [] for (var i = 0; i < files.value.length; i++) { // files.values contains all the files objects const file = files.value[i]; refStorageFunction( storage, "cities/" + docRef.id + "/" + file.name ); const snapshot = await uploadBytes(storageRef, file) const downloadURL = await getDownloadURL(snapshot.ref) photos.push(downloadURL) } return photos }