main.js:2 未捕獲的參考錯誤：firebase 未定義

Question

我試圖將我的 html 聯系表單與 firebase 聯系起來，但我面臨一個錯誤：

未捕獲的參考錯誤：firebase 未定義

在我的 main.js 文件中，我在我的 html 文件中很好地定義了我的 CDN，但是在 main.js 行中我遇到了這個錯誤。我在我的項目中成功安裝了 firebase，但在下面的行中我仍然面臨同樣的問題。

var emailRef = firebase.database().ref('emails'); 

在我的 main.js 代碼中

var emailRef = firebase.database().ref('emails');


  // Listen for form submit
  document.getElementById('contactForm').addEventListener('submit', submitForm);

// Submit form
function submitForm(e){
  e.preventDefault();

    //Get values
    var FullName = getInputval('FullName');
    var Email =getInputval('Email');

        // save message
        saveMessage(FullName,Email);
  
    // Show alert
    document.querySelector('.alert').style.display = 'block';
  
    // Hide alert after 3 seconds
    setTimeout(function(){
      document.querySelector('.alert').style.display = 'none';
    },3000);
  
    // Clear form
    document.getElementById('contactForm').reset();
  }
  

// Function to get  form values
function getInputval(id){
    return document.getElementById(id).value;
}

  
  // Save message to firebase
  function saveMessage(Fullname, Email,){
    var newEmailRef = emailRef.push();
    newEmailRef.set({
      Fullname: Fullname,
      Email:Email

    });
  }

在我的 index.html 文件中，這里是我的 CDN 格式

<script type="module">
  // Import the functions you need from the SDKs you need
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.1.3/firebase-app.js";
  import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.1.3/firebase-analytics.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: "xxxxx",
    authDomain: "xxxxx",
    projectId: "xxxxx",
    storageBucket: "xxxxx",
    messagingSenderId: "xxxxx",
    appId: "xxxxx",
    measurementId: "xxxxx"
  };

  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
  const analytics = getAnalytics(app);
</script>


<script src="main.js"></script>

Answer 1

您的第二個代碼段是此處 ES 模塊格式的 Firebase 的重要版本 9：

<script type="module">

但是在第一個片段中，您嘗試使用 Firebase.database firebase.database()以舊語法使用 Firebase。

這是行不通的：您將不得不使用新的導入格式和語法，或者使用舊的命名空間語法。

---

相當於這個 v8 代碼：

var emailRef = firebase.database().ref('emails'); 

在v9 模塊化語法中：

import { getDatabase, ref } from "firebase/database";

// Get a reference to the database service
const database = getDatabase(app);
var emailRef = ref(database, 'emails'); 

---

v8 中的這段代碼：

function saveMessage(Fullname, Email,){
  var newEmailRef = emailRef.push();
  newEmailRef.set({
    Fullname: Fullname,
    Email:Email

  });
}

在v9 中看起來像這樣：

import { getDatabase, ref, push, set } from "firebase/database";

function saveMessage(Fullname, Email,){
  var newEmailRef = push(emailRef);
  set(newEmailRef, {
    Fullname: Fullname,
    Email:Email
  });
}

---

當您使用這種新舊語法的組合時，我建議您將升級指南放在手邊。