0
341
VistasError de referencia no capturado: db no está definido
Soy nuevo en Firestore y estoy tratando de usar db en app.js, pero aparece este error (Error de referencia no detectada: db no está definido) en la consola cuando ejecuto el archivo html. ¿Puedo saber cómo puedo resolver este problema?
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div> <h1>Cloud cafe</h1> <div class="content"> <form id="add-cafe-form"></form> <ul id="cafe-list"></ul> </div> </div> <script type="module"> // Import the functions you need from the SDKs you need import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.1/firebase-app.js"; import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.0.1/firebase-analytics.js"; import { getFirestore} from "https://www.gstatic.com/firebasejs/9.0.1/firebase-firestore.js"; // TODO: Add SDKs for Firebase products that you want to use // https://firebase.google.com/docs/web/setup#available-libraries // Your web app's Firebase configuration // For Firebase JS SDK v7.20.0 and later, measurementId is optional const firebaseConfig = { apiKey: "AIzaSyA_iQKn0dazcTipquleNaF0df32KdWKia4", authDomain: "ninja-flutter-tut.firebaseapp.com", projectId: "ninja-flutter-tut", storageBucket: "ninja-flutter-tut.appspot.com", messagingSenderId: "876805702468", appId: "1:876805702468:web:cd2cc55cc394f94726cd11", measurementId: "G-9HDMHXT2PY" }; // Initialize Firebase const app = initializeApp(firebaseConfig); const analytics = getAnalytics(app); const db = getFirestore(app); </script> <script src="app.js"></script> </body> </html>A continuación se muestra el código para app.js
// getting data db.collection('cafes').get().then(snapshot => { console.log("test"); });
·
Juan Pablo Isaza
3 Respuestas
Responde la pregunta0
Está utilizando el nuevo SDK con la versión 9, pero escribe el código para la versión 8 del SDK. Intente verificar esto y esto . Simplemente no olvide seleccionar la versión correcta:
Código de ejemplo para la colección:
import { collection, getDocs } from "firebase/firestore"; const querySnapshot = await getDocs(collection(db, "users")); querySnapshot.forEach((doc) => { console.log(`${doc.id} => ${doc.data()}`); });
·
Juan Pablo Isaza
Denunciar
0
La causa más probable es que su archivo app.js se ejecute antes de definir la variable db. Es posible que desee agregar una declaración diferida a su secuencia de comandos app.js ya que está definiendo la variable db en la secuencia de comandos anterior de esta manera:
<script src="app.js" defer></script>Lo mejor sería simplemente incluir el contenido de los primeros scripts en su archivo app.js para que no tenga dos archivos de script separados como este: app.js:
// Import the functions you need from the SDKs you need import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.1/firebase-app.js"; import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.0.1/firebase-analytics.js"; import { getFirestore} from "https://www.gstatic.com/firebasejs/9.0.1/firebase-firestore.js"; // TODO: Add SDKs for Firebase products that you want to use // https://firebase.google.com/docs/web/setup#available-libraries // Your web app's Firebase configuration // For Firebase JS SDK v7.20.0 and later, measurementId is optional const firebaseConfig = { apiKey: "AIzaSyA_iQKn0dazcTipquleNaF0df32KdWKia4", authDomain: "ninja-flutter-tut.firebaseapp.com", projectId: "ninja-flutter-tut", storageBucket: "ninja-flutter-tut.appspot.com", messagingSenderId: "876805702468", appId: "1:876805702468:web:cd2cc55cc394f94726cd11", measurementId: "G-9HDMHXT2PY" }; // Initialize Firebase const app = initializeApp(firebaseConfig); const analytics = getAnalytics(app); const db = getFirestore(); // getting data db.collection('cafes').get().then(snapshot => { console.log("test"); });
·
Juan Pablo Isaza
Denunciar
0
A continuación se muestra mi solución:
// app.js // getting data db.collection('cafes').get().then((snapshot) => { console.log('test') }); /* style.css */ body{ background: #eab0dc; font-family: ubuntu; } h1{ color: #fff; font-size: 64px; letter-spacing: 2px; margin-top: 80px; text-align: center; } .content{ background: #fff; max-width: 960px; margin: 30px auto; padding: 20px 30px; border-radius: 10px 120px 10px 10px; box-shadow: 1px 3px 5px rgba(0,0,0,0.1) } ul{ list-style-type: none; padding: 0; } li{ padding: 20px; background: #f6f6f6; font-size: 20px; color: #555; position: relative; border-bottom: 1px solid #e6e6e6; height: 46px; } li:nth-child(even){ padding: 20px; background: #f2f2f2; } li span{ display: block; } li span:nth-child(2){ font-size: 16px; margin-top: 6px; color: #999; } li div{ position: absolute; top: 0; right: 0px; background: rgba(255,255,255,0.6); width: 40px; text-align: center; padding: 10px 0; font-weight: bold; cursor: pointer; } form input{ float: left; width: 38%; margin: 0; border: 0; border-bottom: 1px solid #eee; margin: 0 1%; padding: 10px; display: block; box-sizing: border-box; font-size: 18px; } form input:focus{ outline: none; border-bottom: 3px solid #88236f; padding-bottom: 8px; transition: all ease 0.2s; } form:after{ content: ''; clear: both; display: block; } button{ border: 0; background: #fff; border-radius: 10px; padding: 13px; width: 14%; box-shadow: -1px 0px 1px rgba(0,0,0,0.1); font-weight: bold; font-family: ubuntu; letter-spacing: 1px; color: #999; } <html> <head> <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js"></script> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Cloud Cafe</h1> <div class="content"> <form id="add-cafe-form"></form> <ul id="cafe-list"></ul> </div> <script> // For Firebase JS SDK v7.20.0 and later, measurementId is optional const firebaseConfig = { apiKey: "AIzaSyA_iQKn0dazcTipquleNaF0df32KdWKia4", authDomain: "ninja-flutter-tut.firebaseapp.com", projectId: "ninja-flutter-tut", storageBucket: "ninja-flutter-tut.appspot.com", messagingSenderId: "876805702468", appId: "1:876805702468:web:cd2cc55cc394f94726cd11", measurementId: "G-9HDMHXT2PY" }; firebase.initializeApp(firebaseConfig); const db = firebase.firestore(); </script> <script src="app.js"></script> </body> </html>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta