【Vuex】Firebaseのfirestoreのドキュメント自動生成IDを事前取得して追加する方法

Vue.js

Firebaseのfirestoreでは、ドキュメントのユニークなIDを自動生成することができます。
ドキュメントを追加する前に自動生成IDを取得できれば、ドキュメントの追加の段階でそのidもオブジェクトの中に入れることができて便利です。
ドキュメント追加前に自動生成IDを取得する方法を紹介します。
以下はVuexの例ですが、他でも応用可能です。

Firebaseのfirestoreで自動生成IDを取得する方法

まずcollectionというどのコレクションにアクセスするかを変数として用意しておきます。
そのコレクションの中でドキュメントが生成される前に、作成されたときのドキュメントIDにアクセスしたいときは、

const collection = db.collection('playlists')
const id = collection.doc().id

とすることでアクセスできます。

だめな例

playlistsというコレクションがあって、そのコレクションに新しいplaylistドキュメントを追加したいとします。
よくやるだめな例は次の通りです。

  actions: {
    // プレイリストの追加
    addPlaylist({ state, commit }, {playlistTitle, playlistDescription}) {
      const collection = db.collection('playlists')
      let newPlaylist = {
        userId: state.user,
        id: collection.doc().id, //ドキュメントのIDを追加
        title: playlistTitle,
        description: playlistDescription,
      }
      collection.add({
        ...newPlaylist
      })

      commit('addPlaylist', newPlaylist)
      commit('showSnackbar', '追加しました')
    },
...
}

これだと、id: collection.doc().idとして一見動くのですが、
実際に付与されるこのドキュメントの自動生成IDとはまた別の自動生成のIDがIDとして格納されることになります。
ランダムでユニークなIDを取得したいだけならいいのですが、ドキュメントのIDと一致しない点に注意が必要です。

ドキュメントのIDと一致させたい場合は、次のようにsetを使って、事前にIDを取得します。

自動生成IDをIDとして格納したドキュメントを作成する方法

  actions: {
    // プレイリストの追加
    addPlaylist({ state, commit }, {playlistTitle, playlistDescription}) {
      // let results = []
      const collection = db.collection('playlists')
      const newDoc = collection.doc().id
      let newPlaylist = {
        userId: state.user,
        id: newDoc,
        title: playlistTitle,
        description: playlistDescription,
      }
      collection.doc(newDoc).set({
        ...newPlaylist
      })

      commit('addPlaylist', newPlaylist)
      commit('showSnackbar', '追加しました')
    },

このようにして、事前にidを取得して、変数に格納しておきます。
そして、そのIDにsetメソッドを使って、新しいドキュメントを格納します。

Vue.js

Posted by devsakaso