检索 Firebase 存储映像的下载 url 时出现问题

Question

我正在尝试检索存储在我的 Firebase 存储中的文件的下载 URL。我将一些数据与每个文件一起存储，因此是 firestore“文件”集合。 files 集合中的每个 doc 都是存储中的一个文件：

const [loading, setLoading] = useState(true);
const [itemData, setItemData] = useState(['']);

const dataRef = firebase.firestore().collection("files");
const fileRef = firebase.storage().ref();

// Load initial data
useEffect(() => {
    return dataRef.get().then(querySnapshot => {

        const list = [];
        querySnapshot.forEach(doc => {

            const { name, uri } = doc.data();

            let imageRef = fileRef.child('/' + uri);

            const imageUrl = imageRef
            .getDownloadURL()
            .then((url) => {
                return url;
            })
            .catch((e) => console.log('Error getting image download URL: ', e));

            console.log(imageUrl);

            list.push({
                id: doc.id,
                name,
                imageUrl: imageUrl
            });

        });

        setItemData(list);

        if (loading) {
            setLoading(false);
        }

    })
    .catch(function(error) {
        console.log("Error getting documents: ", error);
        alert("Error: no document found."); // It doesnt goes here if collection is empty
    })
}, []);

问题是，console.log(imageUrl); 返回一个奇怪的对象：

但我的itemData 包含正确的下载 URL，但嵌套在某个对象的更深处？

不确定这里发生了什么。我只需要 url 就可以显示图片了。

Answer 1

这是因为您没有正确管理对异步 getDownloadURL() 方法的并行调用。在将结果推送到列表数组之前，您应该等待 getDownloadURL() 方法调用返回的承诺完成。你应该使用Promise.all()。

以下应该可以解决问题（未经测试！）：

  useEffect(() => {
    const initialArray = [];
    return dataRef
      .get()
      .then((querySnapshot) => {
        const promises = [];

        querySnapshot.forEach((doc) => {
          const { name, uri } = doc.data();
          let imageRef = fileRef.child('/' + uri);
          promises.push(imageRef.getDownloadURL());
          initialArray.push({
            id: doc.id,
            name,
          });
        });
        return Promise.all(promises);
      })
      .then((urlsArray) => {
        // urlsArray has the same number of elements than initialArray

        const fullArray = [];
        urlsArray.forEach((url, index) => {
          const initialObj = initialArray[index];
          const finalObj = Object.assign(initialObj, url);
          fullArray.push(finalObj);
        });

        setItemData(fullArray);

        if (loading) {
          setLoading(false);
        }
      })
      .catch(function (error) {
        console.log('Error getting documents: ', error);
        alert('Error: no document found.'); // It doesnt goes here if collection is empty
      });
  }, []);