带有 JavaScript 的 FIrebase 实时数据库 [重复]答案

【问题标题】：FIrebase realtime database with JavaScript [duplicate]带有 JavaScript 的 FIrebase 实时数据库 [重复]
【发布时间】：2022-01-04 19:09:18
【问题描述】：

我正在尝试使用 JavaScript 和 firebase 实时数据库创建一个项目。现在我想在页面上列出数据库中的数据。但我无法尝试我的代码，因为我收到了这个错误：

未捕获的类型错误：firebase.database 不是函数在 index.html:69

我在第 69 行的代码：

const issuesRef = firebase.database().ref('student/');

这是我的全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  

    <title>Project</title>
</head>
<body>

    <button id="Insbtn">List items</button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/firebase/8.2.2/firebase-app.js"> 
    </script>


    <script type="module">
    
    // Import the functions you need from the SDKs you need
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.1.0/firebase-app.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
    const firebaseConfig = {
        apiKey: "...",
        authDomain: "...",
        databaseURL: "...",
        projectId: "...",
        storageBucket: "...",
        messagingSenderId: "...",
        appId: "..."
    };

    // Initialize Firebase
    const app = initializeApp(firebaseConfig);

    import { getDatabase, ref, set, child, update, remove, onValue } from "https://www.gstatic.com/firebasejs/9.1.0/firebase-database.js";


    const db = getDatabase();
    const issuesRef = firebase.database().ref('student/');

    function readIssues() {
        issuesRef.on("value", function(snapshot) {
            snapshot.forEach(snap => {
                const issue = snap.val();
                console.log(issue.NameOfStd);
            })
        }
    )}
    
    var insBtn = document.getElementById("Insbtn");
    insBtn.addEventListener('click', readIssues);


    </script>
</body>

</html>

【问题讨论】：

在您的代码顶部，运行console.log(firebase)，看看您会得到什么结果。

标签： javascript html database firebase firebase-realtime-database

【解决方案1】：

您正在使用新的 Modular SDK，但使用旧的名称空间语法来创建 DatabaseReference 并监听它。尝试重构代码如下所示：

import { getDatabase, ref, set, child, update, remove, onValue } from "https://www.gstatic.com/firebasejs/9.1.0/firebase-database.js";

const db = getDatabase();
const issuesRef = ref(db, 'student');

function readIssues() {
  onValue(issuesRef, (snapshot) => {
    snapshot.forEach(snap => {
      const issue = snap.val();
      console.log(issue.NameOfStd);
    })
});

documentation 包含名称空间语法和函数语法的示例。

【讨论】：

只是一个文档链接：firebase.google.com/docs/firestore/manage-data/add-data