0

Me propuse hacer un mini proyecto de blog; vengo bien pero estoy teniendo problemas con la conexión a la base de datos, más que nada al querer publicar mis posteos y que se guarden en la base de datos. Estoy usando la db de firebase, firestore.

El código completo está en mi github por si lo quieren chequear completo, acá voy a subir la parte de código que me parece a mí que es lo que está haciendo ruido.

Archivos: js/firebase.js - js/editor.js (con estos dos estoy teniendo problemas)

Volviendo al error, en la consola me salta

{- Uncaught (in promise) FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore -}

Yo lo tenía en la versión 8 de firebase y la actualicé a la v9.9.1. Así es mi código que tira el error

publishBtn.addEventListener("click", async () => {
  //generating id
  let letters = "abcdefghijklmnñopqrstuvwxyz";
  let blogTitle = blogTitleField.value.split(" ").join("-");
  let id = "";
  for (let i = 0; i < 4; i++) {
    id += letters[Math.floor(Math.random() * letters.length)];

    //docname
    let docName = `${blogTitle}-${id}`;
    let date = new Date();
    console.log("post");

    //Databse Connection
    //await setDoc(doc(db, "cities", "new-city-id"), data);
    //db.collection("cities").doc("new-city-id").set(data);
    await setDoc(doc(db, "blogs", docName), {
      title: blogTitleField.value,
      article: articleField.value,
      bannerImage: bannerPath,
      publishedAt: `${date.getDate()} ${
        month[date.getMonth()]
      } ${date.getFullYeAR()}`,
    })
      .then(() => {
        console.log("data entered");
        location.href = `${docName}`;
      })
      .catch((err) => {
        console.log(err);
      });
  }
});

De lo que no estoy seguro es si el archivo de firebase lo tengo bien: al hacer un console.log(db) me tira 404, lo que me hace pensar que hay un error en la conexión con firebase.

Mi código de firebase

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.9.1/firebase-app.js";
import {
  getFirestore,
  collection,
  setDoc,
  doc,
} from "https://www.gstatic.com/firebasejs/9.9.1/firebase-firestore.js";
import "https://www.gstatic.com/firebasejs/9.9.1/firebase-firestore-compat.js";

const firebaseApp = initializeApp({
  apiKey: "XXXXXXXXXXXX",
  authDomain: "XXXXXXXXXXXXXXX",
  projectId: "XXXXXXXXXXXX",
  storageBucket: "XXXXXXXXXXXXX",
  messagingSenderId: "XXXXXXXXXX",
  appId: "XXXXXXXXXXXXXX",
});

const db = getFirestore(firebaseApp);
export default db;

1 respuesta 1

0

como usa la versión 9 de esta manera puede inicializar la configuración Deberás importar Cloud Firestore a js/firebase.js

documentación https://firebase.google.com/docs/firestore/manage-data/add-data

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseApp = initializeApp({
  apiKey: "XXXXXXXXXXXX",
  authDomain: "XXXXXXXXXXXXXXX",
  projectId: "XXXXXXXXXXXX",
  storageBucket: "XXXXXXXXXXXXX",
  messagingSenderId: "XXXXXXXXXX",
  appId: "XXXXXXXXXXXXXX",
});

Inicialice Firebase

const app = initializeApp(firebaseApp);

Inicialice Cloud Firestore y obtenga una referencia al servicio

const db = getFirestore(app);
export { db };

ahora en js/editor.js para llamar al método set()

import { doc, setDoc } from "firebase/firestore"
import { db } from "js/firebase.js"; <<< revisa si esta ruta esta correcta


publishBtn.addEventListener("click", async () => {

  let letters = "abcdefghijklmnñopqrstuvwxyz";
  let blogTitle = blogTitleField.value.split(" ").join("-");
  let id = "";

  for (let i = 0; i < 4; i++) {
    id += letters[Math.floor(Math.random() * letters.length)];

    let docName = `${blogTitle}-${id}`;
    let date = new Date();
    console.log("post");

    await setDoc(doc(db, "blogs", docName), {
      title: blogTitleField.value,
      article: articleField.value,
      bannerImage: bannerPath,
      publishedAt: `${date.getDate()} ${
        month[date.getMonth()]
      } ${date.getFullYeAR()}`,
    })
      .then(() => {
        console.log("data entered");
        location.href = `${docName}`;
      })
      .catch((err) => {
        console.log(err);
      });
  }
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.