How to get the firebae document id in Vuejs 3

I’m trying to build a crud vuejs3 application (book store), and in the update operation I didn’t figure out how to get the document id in order to update the book details, following are some of my code snippets where I’m currently working on:

UpdateDcoment.js

const updatingDoc = (collection, id) => {
  const isPending = ref(false);
  const error = ref(null);

  let documentRef = db.collection(collection).doc(id);

  const handleUpdateDoc = async (updates) => {
    isPending.value = true;
    error.value = null;
    try {
      const response = await documentRef.update(updates);
      isPending.value = false;
      console.log("update was successfully!", response);
      return response;
    } catch (err) {
      err.value = err.message;
      console.log(err.value);
      error.value = err.message;
      isPending.value = false;
    }
  };

  return { error, isPending, handleUpdateDoc };
};

export default updatingDoc;

BookDetails.vue

<template>
  <div>
    <div v-if="document" class="book-detail-view">
      <div class="book-cover">
        <img :src="document.coverUrl" :alt="`${document.title} book cover`" />
      </div>
      <div class="book-details">
        <h4 class="book-title">
          {{ document.title }}
        </h4>
        <div class="book-description">
          <p>{{ document.description }}</p>
        </div>
        <div class="book-author">
          <p>{{ `Author: ${document.author}` }}</p>
        </div>
        <div v-if="currentAuthenticatedUser">
          <button v-if="!isDeleting" @click="handleDelete">
            Delete the book
          </button>
          <button v-else disabled>processing...</button>
          <router-link :to="{ path: `/books/${document.id}/update` }">
            Update here
          </router-link>
        </div>
      </div>
    </div>
    <div v-else class="error">{{ error }}</div>
  </div>
</template>

<script>
import { computed } from "@vue/runtime-core";
import getDocument from "../../controllers/getDocument";
import getUser from "../../controllers/getUser";
import deleteDocument from "../../controllers/deleteDocument";
import getStoredBook from "../../controllers/userStorage";
import { useRouter } from "vue-router";

export default {
  props: ["id"],
  setup(props) {
    const { error, document } = getDocument("books", props.id);
    const { user } = getUser();
    const { removeDoc, isDeleting } = deleteDocument("books", props.id);
    const { handleDeleteCover } = getStoredBook();
    const router = useRouter();

    const currentAuthenticatedUser = computed(() => {
      return (
        document.value && user.value && user.value.uid === document.value.userId
      );
    });

    const handleDelete = async () => {
      await handleDeleteCover(document.value.filePath);
      await removeDoc();
      router.push({ name: "home" });
    };

    return {
      document,
      error,
      currentAuthenticatedUser,
      handleDelete,
      isDeleting,
    };
  },
};
</script>

UpdateBook.vue:

<template>
  <form @submit.prevent="handleSubmit">
    <h4>Update book:</h4>
    <input type="text" required placeholder="book name" v-model="title" />
    <input type="text" required placeholder="author name" v-model="author" />
    <textarea
      required
      placeholder="book description"
      v-model="overview"
    ></textarea>
    <label for="bookCover">Upload the cover book</label>
    <input type="file" id="bookCover" @change="handleAddCoverBook" />

    <label for="book">Upload the book</label>
    <input type="file" id="book" @change="handleAddBook" />

    <button v-if="!isPending">Update</button>
    <button v-else disabled>Updating...</button>

    <div v-if="fileError" class="error">{{ fileError }}</div>
  </form>
</template>

<script>
import { ref } from "vue";
import userStorage from "@/controllers/userStorage";
import getUser from "@/controllers/getUser";
import { createdAtTime } from "@/firebase/firebaseConfig";
import { useRouter } from "vue-router";
import updatingDoc from "@/controllers/updateDocument";

export default {
  setup() {
    const { url1, url2, handleUploadBook, bookCoverPath, bookPath } =
      userStorage();
    const { user } = getUser();
    const { error, isPending, handleUpdateDoc } = updatingDoc(
      "books",
      document.id
    );
    const router = useRouter();

    const title = ref("");
    const author = ref("");
    const overview = ref("");
    const bookCover = ref(null);
    const book = ref(null);
    const fileError = ref(null);

    const handleSubmit = async () => {
      if (bookCover.value) {
        // Truthy value will show 'uploading...' text whenever the adding books process is processing
        isPending.value = true;
        await handleUploadBook(bookCover.value, book.value);
        // log the result of the event listener wherever the upload was successful
        console.log("book uploaded successfully", url1.value, url2.value);
        const response = await handleUpdateDoc({
          title: title.value,
          author: author.value,
          description: overview.value,
          createdAt: createdAtTime(),
          userId: user.value.uid,
          userName: user.value.displayName,
          coverUrl: url1.value,
          bookUrl: url2.value,
          bookCover: bookCoverPath.value,
          book: bookPath.value,
        });
        // Truthy value will remove 'uploading...' text whenever the adding books process is finished
        isPending.value = false;
        if (!error.value) {
          console.log("updating process successful");
          router.push({ name: "BookDetail", params: { id: response.id } });
        }
      }
    };

    // Upload Cover Book
    const bookCoverTypes = ["image/png", "image/jpg", "image/jpeg"];

    const handleAddCoverBook = (e) => {
      const newBookCover = e.target.files[0];
      if (newBookCover && bookCoverTypes.includes(newBookCover.type)) {
        bookCover.value = newBookCover;
        fileError.value = null;
      } else {
        bookCover.value = null;
        fileError.value = "Please add a cover book (png, jpg or jpeg)";
      }
    };

    // Upload book
    const bookTypes = ["application/pdf", "application/epub"];

    const handleAddBook = (e) => {
      const newBook = e.target.files[0];
      if (newBook && bookTypes.includes(newBook.type)) {
        book.value = newBook;
        fileError.value = null;
      } else {
        book.value = null;
        fileError.value = "Please add a book (pdf or epub)";
      }
    };

    return {
      title,
      author,
      overview,
      handleSubmit,
      handleAddCoverBook,
      handleAddBook,
      fileError,
      isPending,
    };
  },
};
</script>

I’m trying to get the document id from the bookDetails.vue and then use it inside the updateBook.vue but whenever I hit the update button in the UpdateBook.vue I have the following log:

No document to update: projects/books-store-71c7f/databases/(default)/documents/books/pVIg6OytEKE4nEUE8uqd

I’ll be grateful for your help guys!

SOLVED!
So, the trick was to use the params for the current URL in order to get the document id and update the document fields:
here I passing the router-link to redirect to update form:

<router-link
   :to="{ name: 'UpdateBook', params: { id: document.id } }"
   >
     Update here
 </router-link>

And here inside the setup() of the updateBook.vue component I use params to access the document id:

const router = useRouter();
// Get the current document id from the route id
const id = router.currentRoute.value.params.id;
// And here I pass the document id as parameter
const { error, isPending, handleUpdateDoc } = updatingDoc("books", id);