连接Firebase到联系表单时报Uncaught ReferenceError: firebase未定义求助

错误原因 #

你遇到的报错是Firebase版本语法不匹配、作用域配置错误导致的，具体有3个核心问题：

• 你用的是Firebase 9+ 模块化SDK，该版本默认没有全局firebase对象，你写的firebase.initializeApp()属于旧版命名空间式API的写法，自然找不到对应变量
• Firebase初始化代码写在type="module"的script块中，模块内部变量默认是局部作用域，不会暴露给全局引入的main.js调用
• 没有导入Firebase Realtime Database的相关模块，就算初始化完成也无法操作数据库

修复步骤 #

1. 替换index.html中的两个script标签为如下内容，直接将main.js声明为模块类型，Firebase相关导入和初始化统一放在main.js中即可：

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

2. 替换main.js全部代码为适配Firebase 9模块化语法的版本：

// 导入所需的Firebase模块
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.1.3/firebase-app.js";
import { getDatabase, ref, push, set } from "https://www.gstatic.com/firebasejs/9.1.3/firebase-database.js";

// Firebase配置
const config = {
  apiKey: "xxxxx",
  authDomain: "xxxxx",
  databaseURL: "xxxxx",
  projectId: "xxxxx",
  storageBucket: "xxxxx",
  messagingSenderId: "xxxxx"
};

// 初始化Firebase
const app = initializeApp(config);
// 初始化数据库实例
const db = getDatabase(app);
// 对应emails节点的引用
const emailRef = ref(db, 'emails');

// 监听表单提交
document.getElementById('contactForm').addEventListener('submit', submitForm);

// 提交表单逻辑
function submitForm(e){
  e.preventDefault();

  // 获取表单值
  const FullName = getInputval('FullName');
  const Email = getInputval('Email');

  // 保存数据到Firebase
  saveMessage(FullName, Email);
  
  // 显示提示
  document.querySelector('.alert').style.display = 'block';
  
  // 3秒后隐藏提示
  setTimeout(function(){
    document.querySelector('.alert').style.display = 'none';
  },3000);
  
  // 重置表单
  document.getElementById('contactForm').reset();
}

// 获取表单输入值的工具函数
function getInputval(id){
  return document.getElementById(id).value;
}

// 保存数据到Firebase的方法
function saveMessage(Fullname, Email){
  // 生成新的子节点引用
  const newEmailRef = push(emailRef);
  // 写入数据
  set(newEmailRef, {
    Fullname: Fullname,
    Email: Email
  });
}

内容的提问来源于stack exchange，提问作者Gibson Raphael