如何将HTML表单数据保存到Firebase实时数据库？解决导入报错

错误原因 #

Firebase 9.x采用模块化架构，废弃了旧版的命名空间式导入路径（如firebase/database），必须使用新的模块化导入语法或compat兼容层，否则会抛出模块解析错误。

解决方案 #

提供两种可行方案，按需选择：

方案1：使用Compat兼容层（快速适配旧代码） #

如果习惯旧版Firebase写法，可通过compat路径导入兼容层，代码改动最小：

1. 修改Firebase初始化与数据库导入代码：

import { initializeApp } from "firebase/app";
// 从compat路径导入数据库模块
import { getDatabase, ref, set } from "firebase/compat/database";

// 你的Firebase配置（从控制台复制）
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  databaseURL: "YOUR_DATABASE_URL",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// 初始化App与数据库实例
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);

// 处理表单提交逻辑
function handleSubmit(e) {
  e.preventDefault();
  const inputVal = document.getElementById("userInput").value;
  
  // 将输入内容保存到Firebase数据库指定路径
  set(ref(db, "userInputs/" + Date.now()), {
    content: inputVal,
    timestamp: Date.now()
  })
  .then(() => {
    alert("数据保存成功");
    document.getElementById("userForm").reset();
  })
  .catch(err => {
    console.error("保存失败：", err);
    alert("数据保存失败，请检查控制台");
  });
}

// 绑定表单提交事件
document.getElementById("userForm").addEventListener("submit", handleSubmit);

2. HTML中确保脚本标签声明为模块：

<form id="userForm">
  <input type="text" id="userInput" placeholder="输入内容" required>
  <button type="submit">保存</button>
</form>

<script type="module" src="your-script-file.js"></script>

方案2：使用Firebase 9+原生模块化API（推荐，更轻量化） #

采用官方推荐的模块化导入，打包体积更小：

import { initializeApp } from "firebase/app";
// 直接导入数据库核心函数
import { getDatabase, ref, set } from "firebase/database";

const firebaseConfig = { /* 你的配置 */ };
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);

// 表单处理逻辑与方案1一致，函数调用完全兼容
function handleSubmit(e) {
  e.preventDefault();
  const inputVal = document.getElementById("userInput").value;
  
  set(ref(db, "userInputs/" + Date.now()), {
    content: inputVal,
    timestamp: Date.now()
  })
  .then(() => {
    alert("数据保存成功");
    document.getElementById("userForm").reset();
  })
  .catch(err => {
    console.error("保存失败：", err);
    alert("数据保存失败，请检查控制台");
  });
}

document.getElementById("userForm").addEventListener("submit", handleSubmit);

额外检查项 #

• 确保已正确安装Firebase 9.22.0：

npm install firebase@9.22.0

• 确认Firebase控制台中已启用实时数据库，测试阶段可临时设置公开规则（上线后需配置安全规则）：

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

内容的提问来源于stack exchange，提问作者Mukul Rawat