javascript - Uncaught ReferenceError : db is not defined

标签 javascript html google-cloud-firestore

我是 Firestore 的新手,我正在尝试在 app.js 中使用 db,但是当我运行 html 文件时,我在控制台上收到此错误(Uncaught ReferenceError: db is not defined)。我可以知道如何解决这个问题吗?

<!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>

下面是app.js的代码

// getting data
db.collection('cafes').get().then(snapshot => {
    console.log("test");
});

最佳答案

最可能的原因是您的 app.js 文件在您定义 db 变量之前被执行。你可能想在你的 app.js 脚本中添加一个 defer 语句,因为你在它上面的脚本中定义了 db 变量,就像这样:

<script src="app.js" defer></script>

最好的办法是在你的 app.js 文件中只包含第一个脚本内容,这样你就不会像这样有两个单独的脚本文件: 应用程序.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");
});

关于javascript - Uncaught ReferenceError : db is not defined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69010610/

相关文章:

javascript - 在 jquery 和 keydrown 插件中为 lshift down 分配函数?

php - PHP图片上传问题

c# - 我如何向 API 发出 XML 或 JSON 请求

javascript - 单击时在 Select2 多选上指定边框颜色

javascript - 多个 GET 调用的性能影响与从服务器以 JSON 格式向 AJAX 发送更复杂的 POST/GET 请求

javascript - 类(class)移除的过渡不起作用

android - flutter ,云火存储查询方法,其中无法正常工作

firebase - flutter :显示在一段时间内调用了null的getter文档

google-cloud-firestore - Firestore 在线规则模拟器因自定义声明而失败

javascript - 如何在ajax响应后在Javascript中按描述进行过滤