Cloud Firestoreに登録されたデータをtimestamp順に取得する

序章

Firebaseのサービス「Cloud Firestore」にデータを記録し、そこから取得したデータを表示するWebサイトを作りました。単純に取得して表示したところ、登録順にデータは表示されず、謎の順番で表示されてしまうのでした。

firebase.google.com

原因

FirebaseのCloud Firestoreでは、addDoc()メソッドを使用してデータを追加すると、ユニークなランダムなIDが自動的に割り当てられているようで、そのユニークなID順で表示されている模様。

解決方法

Firestoreのドキュメントに特定のフィールドを追加し、そのフィールドを使用してデータをソートする事で解決します。

具体的な解決コード

  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const postData = collection(db, "posts");
    const queryRef = query(postData, orderBy("timestamp"));

    getDocs(queryRef).then((querySnapshot) => {
      const data = querySnapshot.docs.map((doc) => ({ ...doc.data() }));
      setPosts(data);
    });

query()を使い、第２引数でtimestampを指定してソートします。

    const queryRef = query(postData, orderBy("timestamp"));

gueryRefからドキュメント一覧を取得し、querySnapshotに格納します。

    getDocs(queryRef).then((querySnapshot) => {

querySnapshotから一つ一つドキュメントデータを取得し、dataに格納します。

      const data = querySnapshot.docs.map((doc) => ({ ...doc.data() }));

上記の流れで無事タイムスタンプ順にデータを取得できました。

追記

import {
  collection,
  getDocs,
  addDoc,
  Timestamp,
  onSnapshot,
  doc,
  query,
  orderBy,
} from "firebase/firestore";

importを忘れずに！