firebaseからtimestampを表示させたい。

Question

javascript,react,firebaseで、メッセージアプリを作成中、
メッセージと一緒にtimestampも表示させようとしています。
firebaseに保存してある、content,timestampを取得はできましたが、表示させようとすると、このようなエラーが出てしまいます。
なんとか、timestampを、Data型に変換して取り出すことはできたのですが、表示させることができません。

発生している問題・エラーメッセージ

Error: Objects are not valid as a React child (found: Sun Mar 07 2021 17:11:44 GMT+0900 (日本標準時)). If you meant to render a collection of children, use an array instead.

該当のソースコード

javascript
ソースコード
useEffect(() => {
    firebase
      .firestore()
      .collection("messages")
      .orderBy("timestamp", "asc")
      .onSnapshot((snapshot) => {
        const messages = snapshot.docs.map((doc) => {
          // console.log(doc.data().timestamp);
          return {
            content: doc.data().content,
            timestamp: new Date(doc.data().timestamp.toDate()),
          };
        });

        setMessages(messages);
        console.log(messages);
      });
  }, []);

{中略}

const exportMessages = () => {
    if (messages !== null) {
      return messages.map((message, index) => (
        <li className="list" key={index}>
          {/* <span>（ユーザー名）</span> */}
          <ListItem>
            <ListItemAvatar>
              <Avatar alt="icon" src="/static/images/avatar/1.jpg" />
            </ListItemAvatar>
            <span className="p-chat__bubble">{message.content}</span>
            <span>{message.timestamp}</span>
          </ListItem>
        </li>
      ));
    }
  };

試したこと

エラーメッセージで検索したり、timestampについて調べたが、わかりません。

補足情報（FW/ツールのバージョンなど）

すべて最新です。

Comments

[hoshi-takanori]

message.timestamp は Date 型なので、toString() などで文字列にする必要があるのでは。

[takoyaki11]

toString() にしてもエラーになりました。。。

Error: Objects are not valid as a React child (found: Invalid Date). If you meant to render a collection of children, use an array instead.
こちらがエラーコードになります。。。

[hoshi-takanori]

あ、よく見たら timestamp.toDate() したものをさらに new Date に渡してますが、toDate は Date オブジェクトを返すので new Date は不要では。
https://firebase.google.com/docs/reference/js/firebase.firestore.Timestamp#todate

[takoyaki11]

ありがとうございます！
なんとか表示はできたのですが、秒ででているため、変換させようと思うのですが、またつまづいてしまったら、質問させていただいてもよろしいでしょうか。。。

[hoshi-takanori]

日付のフォーマットは moments や date-fns などのライブラリを使うと良いのでは。
https://mangano-ito.hatenablog.com/entry/2020/05/18/134751

[takoyaki11]

すみません。
昨夜結局うまくいかず、今朝、こちらのmoment.jsをダウンロードしてみたのですが、どこにどう書いて使用すればいいかわかりません。。
教えていただけないでしょうか？

[hoshi-takanori]

ダウンロード？ npm または yarn はお使いではありませんか？

[takoyaki11]

yarn add しました！

Answer 1

日付を moment.js を使ってフォーマットするならこんな感じでしょうか。
参考: JavaScript｜Moment.jsで日付操作(比較, 差分, フォーマット) - わくわくBank

import moment from 'moment';

// 略
            <span>{moment(message.timestamp).format('YYYY/MM/DD HH:mm')}</span>

なお、moment.js はメンテナンスモードに入ってるようなので、代わりに dsy.js を使った方がいいかも知れません。
参考: Day.jsで日付操作(比較, 差分, フォーマット) - わくわくBank

import dayjs from 'dayjs';

// 略
            <span>{dayjs(message.timestamp).format('YYYY/MM/DD HH:mm')}</span>

Comments

[takoyaki11]

ありがとうございます！
timestamp: doc.data().timestamp.toDate()　
によりDate型の状態にして、moment.jsを使用することで、日付と時間を表示させることができました！

[takoyaki11]

何度もすみません。。。もしよろしければ、教えていただけないでしょうか？

firebase.firestore().collection("messages").add({
content: value,
　????timestamp: firebase.firestore.FieldValue.serverTimestamp(), //こうしてデータをtimestampに保存させています
});
このコードで、メッセージを入れると、下記の様なエラーが出ます。
TypeError: Cannot read property 'toDate' of null

しかし、????timestamp: new Date()　とすると、エラーは出ません。

この２パターンでtimestampに保存されいてる型がそれぞれ違うのでしょうか？
コンソールログで確認してみた感じでは、違いはないと思いました。。。

[hoshi-takanori]

new Date() だとクライアント側 (ブラウザ) の時刻になると思いますが、端末の時刻が狂ってたら (または故意にずらしてたら) 問題が起こる可能性がありますね。
serverTimestamp() は Firebase のサーバー側で時刻を設定するので、サーバーと通信するまでは時刻を取得できないのでしょう。

[takoyaki11]

なるほど。
serverTimestamp()を使用して、こちらのエラーを回避する方法はあるのでしょうか？