Estoy creando un sitio para mi tienda y aprendiendo Vue js al mismo tiempo. Tengo un problema para obtener la identificación del producto de firestore y poder eliminar el producto. Cuando creo un nuevo producto en la consola, la identificación tampoco aparece, recibí este mensaje (Documento escrito con identificación: indefinido) Estoy usando Vue js 3 y Firebase 9
Tengo esto en main.j
const dataBase = collection(db, "products");y esto en products.js
<script> import { dataBase } from '../main'; import { addDoc, onSnapshot, doc, deleteDoc } from "firebase/firestore"; export default { name: "Products", props: { msg: String }, data() { return { products: [], product: { name: '', detail: '', price: '', brand: '', category: '' } } }, methods: { saveData() { try { const docRef = addDoc(dataBase, this.product); console.log("Document written with ID: ", docRef.id); this.reset(); } catch (e) { console.error("Error adding document: ", e); } }, reset() { Object.assign(this.$data, this.$options.data.apply(this)); }, deleteProduct(doc) { deleteDoc(doc(dataBase, doc.id)); } }, created() { onSnapshot(dataBase, (snapshot) => { snapshot.docs.forEach((doc) => { this.products.push({ ...doc.data(), id: doc.id }) }) }); } }; </script>¡Gracias!
El resultado "Documento escrito con ID: indefinido" se debe a que lafunción addDoc es una operación asíncrona y, por lo tanto, devuelve una Promise<DocumentReference> . Tendrá que await su resultado o usar then :
addDoc(dataBase, this.product).then((docRef) => { console.log("Document written with ID: ", docRef.id); this.reset(); });