修复Firebase未定义错误，实现联系表单数据存入Firebase Database

你的问题出在使用Firebase 9.x模块化SDK时，仍沿用了旧版全局firebase对象的调用方式，而模块化版本要求显式导入所需模块并使用对应API。以下是修复步骤和完整代码：

修复要点 #

• 显式导入Firebase Database的核心方法
• 替换旧版数据库引用、数据推送的语法为模块化写法

修改后的JavaScript代码（index-script2.js） #

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

const firebaseConfig = {
  apiKey: '',
  authDomain: '',
  databaseURL: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: '',
  appId: '',
}

// 初始化Firebase
const app = initializeApp(firebaseConfig)
// 获取数据库实例并创建消息集合引用
const db = getDatabase(app)
const messageRef = ref(db, 'messages')

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

function submitForm(e) {
  e.preventDefault()
  // 获取表单值
  const name = getInputVal('yourName')
  const gender = getInputVal('gender')
  const message = getInputVal('input-area2')

  saveMessage(name, gender, message)
}

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

// 保存消息到Firebase Database
function saveMessage(name, gender, message) {
  // 创建新的消息节点引用
  const newMessageRef = push(messageRef)
  // 设置节点数据
  set(newMessageRef, {
    name: name,
    gender: gender,
    message: message,
  })
}

确认HTML配置 #

确保你的HTML中引入JS文件的标签带有type="module"属性，你当前的代码已经正确设置：

<script src="index-script2.js" type="module"></script>

最后，记得填充firebaseConfig中的真实配置信息（从Firebase控制台获取），否则数据库连接会失败。

内容的提问来源于stack exchange，提问作者Amr El-Nagdy