[Firebase] Firestore storage/object-not-found 에러 해결

문제

현재 트윗을 보여줄 때 트윗을 게시한 사람의 프로필 사진도 보인다. 

이렇게 구현하기 위해 트윗이 마운트될 때 트윗을 게시한 사람의 정보를 갖고 오도록 아래와 같이 함수를 만들어 useEffect에 넣었다.

// Name 가져오기
  const getName = async () => {
    const docRef = await getDoc(doc(db, "users", userId));
    setName(docRef.get("userName"));
  };

  // 프로필 사진 가져오기
  const getProfilePhoto = async () => {
    const fileRef = ref(storage, `avatars/${userId}`);
    try {
      await getDownloadURL(fileRef).then((photoUrl) => {
        setProfilePhoto(photoUrl);
      });
    } catch (error) {
      console.log(error);
    }
  };

사진은 firestore database가 아닌 storage에 저장되기 때문에 따로 갖고 오도록 했다.

그런데 등록된 프로필 사진이 없는 경우(=storage의 avatars 버킷에 userId를 이름으로 저장된 사진)에는 계속 콘솔창에 에러가 떴다...

FirebaseError: Firebase Storage: Object 'avatars/6DyaEGfAGJZ25tj7PglivDb7xY12' does not exist. (storage/object-not-found)

Storage에 찾고자 하는 객체가 없다는 말이다.

 

없으면 svg 이미지를 보여주게 해둬서 동작에는 문제가 없었지만 에러가 뜨면...거슬리니까 해결해준다.

 

 

 

해결

어차피 유저 정보를 콜렉션으로 만들어 Firestore Database에 저장하기로 했기 때문에 유저 정보에 프로필 사진 url도 들어가도록 photo 필드를 만들어서 관리했다.

 

이렇게 하고 각 유저의 프로필 사진 src를 document에 저장된 photo 값으로 하니 에러없이 깨끗한 콘솔창을 만들 수 있었다!