I'm trying to upload multiple images to firebase storage and store those urls in one firestore document as an array of strings, but I couldn't add all urls in the same firestore document. Instead, it's creating different documents for each firebase storage Url.
ImageUpload.js
import React, { useState } from "react";
import { toast } from "react-toastify";
import { db, storage } from "../firebase.config";
import { ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";
import { collection, addDoc, arrayUnion, FieldValue, updateDoc } from "firebase/firestore";
import { useNavigate } from "react-router-dom";
import "./style.css";
function ImageUpload() {
  const [allImages, setAllImages] = useState([]);
  function handleAllImage(e) {
    e.preventDefault();
    setAllImages(e.target.files);
    console.log(e.target.files);
  }
  function MutipleUpload(e) {
    e.preventDefault();
    try {
      const docRef = collection(db, "products");
      for (let i = 0; i < allImages.length; i++) {
        const storageRef = ref(storage, `productImages/${allImages[i].name}`);
        const uploadTask = uploadBytesResumable(storageRef, allImages[i], {
          contentType: allImages[i].type,
        });
        uploadTask.on(
          "state_changed",
          (snapshot) => {
            const progress =
              (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
            console.log(progress);
          },
          (error) => toast.error(error.message),
          () => {
            getDownloadURL(uploadTask.snapshot.ref).then(
              async (downloadURL) => {
                await addDoc(docRef, {
                  imgUrl: arrayUnion(downloadURL),
                });
              }
            );
          }
        );
      }
      toast.success("product added successfully!");
    } catch (error) {
      console.log(error.message);
    }
  }
  return (
    <>
      <input
        type="file"
        multiple="multiple"
        onChange={handleAllImage}
        required
      />
      <button onClick={MutipleUpload} type="submit" className="buy__btn mt-3">
        Add Image
      </button>
    </>
  );
}
export default ImageUpload;

问题出在这段代码中：
每次调用 `addDoc` 时，Firestore 都会在集合中创建一个新文档。
如果您想要[更新现有文档](https://firebase.google.com/docs/firestore/manage-data/add-data#update-data)，您需要执行以下步骤：
1. 记住要更新的文档的 ID。
2. 然后对该文档调用 `updateDoc`。
要生成文档 ID 一次，然后随时进行更新，请查看[添加文档](https://firebase.google.com/docs/firestore/manage-data/add-data#add_a_document)文档中的第三个代码片段：
> 在某些情况下，创建一个带有自动生成的 ID 的文档引用，然后稍后使用引用是有用的。对于这种用例，您可以调用 `doc()`：
> ```javascript
> import { collection, doc, setDoc } from "firebase/firestore"; 
> 
> // 添加带有生成的 ID 的新文档
> const newCityRef = doc(collection(db, "cities"));
> 
> // 稍后...
> await setDoc(newCityRef, data);
>```
应用于您的用例，可能会类似于这样：
```javascript
const docRef = collection(db, "products");
const newDocRef = doc(docRef); // 生成一个新文档的引用
for (let i = 0; i < allImages.length; i++) {
  const storageRef = ref(storage, `productImages/${allImages[i].name}`);
  const uploadTask = uploadBytesResumable(storageRef, allImages[i], {
    contentType: allImages[i].type,
  });
  uploadTask.on(
    "state_changed",
    (snapshot) => {
      const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
      console.log(progress);
    },
    (error) => toast.error(error.message),
    () => {
      getDownloadURL(uploadTask.snapshot.ref).then(
        async (downloadURL) => {
          await setDoc(newDocRef, {
            imgUrl: arrayUnion(downloadURL),
          }, { merge: true }); // 告诉它将值合并到任何现有文档中
        }
      );
    }
  );
}