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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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