サブコレクションのドキュメントidを取得して対象を削除したい

#サブコレクションのドキュメントidを取得して対象を削除したい

サブコレクションの「bookmarks」にて自動付与されるドキュメントID(赤で囲っている箇所)を取得したいですが、このidの取得方法が分からず行き詰まっております・・

　　　　firebase
           .firestore()
           .collection("users")
           .doc(this.$route.params.uid)
           .collection("bookmarks")
           .doc() //このdocのidを参照したい
           .delete()

自動付与されるドキュメントID(赤で囲っている箇所)のみを取得すれば削除出来ると思うのですが、
どのように取得すればいいのでしょうか・・

分かる方いらっしゃいましたらお力添えを頂きたいです。

よろしくお願いいたします。

#bookmark.vue(親コンポーネント)

html
1<template>
2  <div>
3    <Header />
4    <div class="bookmarkList flex">
5      <h3 class="bookmarkList-title flex">{{ bookmarkData.name }} さんのブックマーク一覧</h3>
6      <hr class="separate" />
7      <div class="bookmarkList-posts">
8        {{bookmarkList.list}}
9        <paginate name="paginate-bookmarkList" tag="ol" :list="bookmarkList" :per="3">
10          
11          <List
12            v-for="(list, index) in paginated('paginate-bookmarkList')"
13            :bookmark="bookmark"
14            :key="list.id"
15          />
16        </paginate>
17        <paginate-links
18          for="paginate-bookmarkList"
19          class="pagination flex"
20          :show-step-links="true"
21          :style="bookmarkList == '' ? 'display:none;' : 'display:flex;'"
22        ></paginate-links>
23      </div>
24    </div>
25  </div>
26</template>

js
1export default {
2  data() {
3    return {
4      bookmarkData: {},
5      paginate: ["paginate-bookmarkList"],
6      bookmarkList: []
7    };
8  },
9  components: {
10    Header,
11    List
12  },
13  methods: {},
14  created() {
15    firebase
16      .firestore()
17      .collection("users")
18      .doc(this.$route.params.uid)
19      .get()
20      .then(snapshot => {
21        this.bookmarkData = snapshot.data();
22      });
23
24    firebase
25      .firestore()
26      .collection("users")
27      .doc(this.$route.params.uid)
28      .collection("bookmarks")
29      .orderBy("time", "desc")
30      .get()
31      .then((snapshot) => {
32        snapshot.forEach((doc) => {
33          this.bookmarkList.push(...doc.data(), id: doc.id);
34        });
35      });
36  }
37};
38</script>

#list.vue(子コンポーネント)

html
1<template>
2  <div class="card">
3    <div class="face face1 flex">
4      <div class="content">
5        <img
6          class="profile-icon"
7          width="50"
8          height="50"
9          :src="
10            returnUserData() ? returnUserData().uploadedImage.fileUrl : preview
11          "
12        />
13        <h3>{{ list.title }}</h3>
14      </div>
15    </div>
16    <div class="face face2 flex">
17      <div class="content flex">
18        <button class="hide-btn" @click="deletePost">×</button>
19        <p>{{ list.description }}</p>
20        <router-link :to="`/chat/${list.id}`" class="join-btn flex">ルームへ参加</router-link>
21        <img src="../assets/ブックマーク.jpg" alt="ブックマーク" class="bookmark-icon" @click="savePost" />
22        <p class="post-time">{{ list.time.toDate().toLocaleString() }}</p>
23      </div>
24    </div>
25  </div>
26</template>

export default {
  data() {
    return {
      num: 0,
},

  props: {
    list: {
      type: Object
    },
  },

savePost() {
      const id = firebase
        .firestore()
        .collection("users")
        .doc(this.$route.params.uid)
        .collection("bookmarks")
        .doc().id;

      ++this.num;

      if (this.num % 2 == 0) {
        firebase
          .firestore()
          .collection("users")
          .doc(this.$route.params.uid)
          .collection("bookmarks")
          .doc()
          .delete()
          .then(() => {
            this.$swal("ブックマークを取り消ししました。", {
              icon: "success"
            });
          })
          .catch(() => {
            this.$swal("ブックマークを取り消し出来ません。", {
              icon: "error"
            });
          });
          console.log(id);
      } else {
        firebase
          .firestore()
          .collection("users")
          .doc(this.$route.params.uid)
          .collection("bookmarks")
          .add({
            id: id,
            uid: this.$route.params.uid,
            list: this.list,
            time: firebase.firestore.FieldValue.serverTimestamp()
          })
          .then(() => {
            this.$swal("ブックマークに追加しました。", {
              icon: "success"
            });
          })
          .catch(() => {
            this.$swal("ブックマークを追加出来ません。", {
              icon: "error"
            });
          });
      }
    },

行動規範の内容に同意します

回答1件

自己解決

savebookmerk（）として、ドキュメントIDをbookmarkIdとして保存し、
deleteBookmark()でListから参照して、this.list.bookmarkIdとして削除できました。

 saveBookmark() {
      const ref = firebase
        .firestore()
        .collection("users")
        .doc(this.$route.params.uid)
        .collection("bookmarks")
        .doc();

      const id = ref.id;

      firebase
        .firestore()
        .collection("users")
        .doc(this.$route.params.uid)
        .collection("bookmarks")
        .doc(id)
        .set({
          bookmarkId: id,
          ...this.list,
          time: firebase.firestore.FieldValue.serverTimestamp()
        })
        .then(() => {
          this.$swal("ブックマークに追加しました。", {
            icon: "success"
          });
        })
        .catch(() => {
          this.$swal("ブックマークを追加出来ません。", {
            icon: "error"
          });
        });
    },


    deleteBookmark() {
      firebase
        .firestore()
        .collection("users")
        .doc(this.$route.params.uid)
        .collection("bookmarks")
        .doc(this.list.bookmarkId)
        .delete()
        .then(() => {
          this.$swal("ブックマークを取り消ししました。", {
            icon: "success"
          });
          this.$router.go({
            path: `/bookmark/${this.$route.params.uid}`,
            force: true
          });
        })
        .catch(() => {
          this.$swal("ブックマークを取り消し出来ません。", {
            icon: "error"
          });
        });
    },

投稿2021/06/08 11:53

TMTN

総合スコア53