Error = firebase, read property “ …” of undefined

에러: firebase, TypeError: read property “ …” of undefined

firebase로 구현 중 db에서 데이터를 받아왔는데 위 같은 에러가 발생하였습니다.

해결책

아래 예제를 참고하겠습니다.

제대로 데이터를 받아와도 에러가 뜨는 이유는 detail 페이지를 클릭했을 때 데이터가 바로 받아와야하지만 useEffect 늘 실행해서 데이터를 firebase에서 받아오는 데 시간이 걸립니다. 그 짧은 텀에서 오류가 발생하게 됩니다. 이를 해결하는 방법은 예제 1 번에서

{movie && (
	<>
	...

)}

로 감싸주는겁니다. movie에 값이 있으면 아래 코드가 실행되게 만들어줍니다. firebase에서 데이터가 넘어 오는데로 제대로 구현되는걸 확인할수있습니다.

예제

//예제1
function Detail() {
  const { id } = useParams();
  const [movie, setMovie] = useState();

  useEffect(() => {
    //db에서 인포 가져오기
    db.collection("movies")
      .doc(id)
      .get()
      .then((doc) => {
        if (doc.exists) {
          //save the movie data
          setMovie(doc.data());
        } else {
          // redirect to home page
        }
      });
  }, []);

  return (
    <Container>
      {movie && (
        <>
          {/* 바탕화면입니다 */}
          <Background>
            <img src={movie.backgroundImg} alt="" />
          </Background>
          {/* 디테일 제목입니다 */}
          <ImageTitle>
            <img src={movie.titleImg} alt="" />
          </ImageTitle>
          {/* 컨트롤입니다 */}
          <Controls>
            <PlayButton>
              <img src="/images/play-icon-black.png" alt="" />
              <span>PLAY</span>
            </PlayButton>
            <TrailerButton>
              <img src="/images/play-icon-white.png" alt="" />
              <span>TRAILER</span>
            </TrailerButton>
            <AddButton>
              <span>+</span>
            </AddButton>
            <GroupWatchButton>
              <img src="/images/group-icon.png" alt="" />
            </GroupWatchButton>
          </Controls>
          <SubTitle>{movie.subTitle}</SubTitle>
          <Description>{movie.description}</Description>
        </>
      )}
    </Container>
  );
}