How to get the firebae document id in Vuejs 3 - firebase

Question

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 appreciate your hints and help guys!

Answer 1

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);