在 firebase 中尝试在启动时获取不存在的数据时如何处理获取错误？

Question

当我的使用效果调用应用程序加载开始时不存在的元素时，或者用户尚未设置任何个人资料图像时，我收到 GET/404 错误。 我遇到了 2 个错误，catch 块处理了一个错误，但我仍然遇到了 1 个错误。

useEffect(() => {
 if (_authContext?.currentUser) {
      const getImg = async () => {
        const storage = getStorage();
        const storageRef = ref(storage, `profiles/${_authContext.currentUser.uid}/profile-image`);
        await getDownloadURL(storageRef)
          .then((url) => {
            if (url) {
              setLoaded(url)
            }
          })
          .catch((err) => console.log(err));
      };
      getImg();
    }
  }, []);

Answer 1

Firebase 存储具有内置错误处理程序。请参阅下面的示例代码：

import { getStorage, ref, getDownloadURL } from "firebase/storage";

// Create a reference to the file we want to download
const storage = getStorage();
const storageRef = ref(storage, `profiles/${_authContext.currentUser.uid}/profile-image`);

// Get the download URL
getDownloadURL(storageRef)
  .then((url) => {
    if (url) {
      setLoaded(url)
    }
  })
  .catch((error) => {
    // A full list of error codes is available at
    // https://firebase.google.com/docs/storage/web/handle-errors
    switch (error.code) {
      case 'storage/object-not-found':
        // File doesn't exist
        break;
      case 'storage/unauthorized':
        // User doesn't have permission to access the object
        break;
      case 'storage/canceled':
        // User canceled the upload
        break;

      // ...

      case 'storage/unknown':
        // Unknown error occurred, inspect the server response
        break;
    }
  });

上面的代码应该处理来自 Firebase 的错误。如果该文件不存在，您的控制台/网络选项卡中将会出现 GET 404（未找到）错误。对于这种情况有一个解决方法，您可以运行 list( ) 或 listAll() 命令，以在运行 getDownloadURL() 之前确保文件是否存在于目录中。请参阅下面的示例代码以供参考：

useEffect(() => {
         const getImg = async () => {
           const storage = getStorage();
           const storageFolderRef = ref(storage, `test/`);
           const imageRef = ref(storage, `test/profile-image.png`);
          // Find all the prefixes and items.
          listAll(storageFolderRef)
            .then((res) => {
              if (res.items.length > 0) {
                getDownloadURL(imageRef)
                .then((url) => {
                  if (url) {
                   setLoaded(url)
                  }
                })
                .catch((error) => {
                 // A full list of error codes is available at
                 // https://firebase.google.com/docs/storage/web/handle-errors
                 switch (error.code) {
                   case 'storage/object-not-found':
                     // File doesn't exist
                     break;
                   case 'storage/unauthorized':
                     // User doesn't have permission to access the object
                     break;
                   case 'storage/canceled':
                     // User canceled the upload
                     break;
             
                   // ...
             
                   case 'storage/unknown':
                     // Unknown error occurred, inspect the server response
                     break;
                 }
                });
              }
            }).catch((error) => {
              console.log(error);
            });
         };
         getImg();
     }, []);