12. 자살예방웹사이트 - Objects are not valid as a React child 오류

오류 발생

Objects are not valid as a React child (found: object with keys {seconds, nanoseconds}). If you meant to render a collection of children, use an array instead.

발생위치

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (message.trim() !== "") {
      try {
        // 새로운 메시지를 Firestore에 추가
        await addDoc(messagesRef, {
          text: message,
          createdAt: new Date(),
          nickname: userData.nickName,
        });
        console.log(formatDateTime(new Date()).toLocaleString());
        // 입력 필드 초기화
        setMessage("");
      } catch (error) {
        console.error("Error adding message: ", error);
      }
    }
  };

<ChatContainer>
      <ChatMessageBox>
        {messages.map((msg, index) => (
          <ChatMessage key={index} message={msg.text} isUser={msg.nickname} time={msg.createdAt} />
        ))}
      </ChatMessageBox>
      <ChatInputForm />
    </ChatContainer>

 

seconds와 nanoseconds 프로퍼티를 가진 객체가 React에서 직접 렌더링되려고 하기 때문에 발생하는 오류입니다.

이 오류는 createdAt 값이 Firestore에서 반환되는 Timestamp 객체인 것으로 보이며, 이 객체를 직접 렌더링할 수 없습니다.

 

  createdAt: formatDateTime(new Date()).toLocaleString(),

그래서 형태를 문자열로 만들어 createdAt에 저장했습니다.