cannot convert undefined or null to object 에러

문제 상황

컴포넌트가 마운트될때 firebase realtime database에서 데이터를 읽어와 setState하여 컴포넌트의 state를 업데이트하는 상황이였다. (database의 데이터는 object로 받아옴.)

• 해결 코드

  useEffect(() => {
    databaseService.read(uid).then((snapshot) => {
      snapshot.val() && setCards(snapshot.val());
    });
  }, []);

결론부터말하면

snapshot.val() 이 undefined이나 null일때의 처리를 해주지 않아서이다. 그래서 setCards(snapshot.val()) 을 하게되어 state에 {} 도아닌 그냥 null이 들어가게 되어 그 이후의 동작인 Object.keys(card).map(item ~~) 의 동작에서 card인 state가 null이니 cannot convert undefined or null to object 에러가 나왔다.

참고로 const obj = {} 인 경우의 Object.keys(obj) 의 접근은 가능하나 const obj = null 인경우 Object.keys(obj) 의 접근은 불가능하다.

어떻게 보면 notObj은 object type이 아니니 에러가 나는게 당연한데 이부분을 조금 얼탔다.

결론

• {}와 null은 엄연히 다르다. {} 은 object이고 null 은 primitive type인 null이다.
• null과 undefined일때의 예외처리를 해주는걸 잊지말자.