通过HTML+JS无法向Firebase写入数据提示writeUserData未定义

开发者阿泽

2026-8-29

问题根因

你碰到的"writeUserData" is not defined报错、数据无法写入Firebase的问题，由多处代码错误共同导致：

定义writeUserData的script标签添加了type="module"属性，ES模块拥有独立作用域，内部声明的函数不会挂载到全局window对象，因此HTML内联的onclick="writeUserData()"无法找到对应函数
你使用的是Firebase v9+版本SDK，但混用了v8版本的命名空间调用写法firebase.database().ref()，且没有导入数据库操作所需的getDatabase、ref、set等方法，调用逻辑本身无效
代码结构存在语法错误：script标签未正常闭合就直接编写form表单HTML，writeUserData函数也缺少闭合的大括号
单独引入的无模块版本firebase-database脚本，和模块化导入的firebase-app SDK版本不匹配
表单按钮默认是submit类型，点击后会触发页面刷新，就算写入逻辑正常也会被刷新操作打断

修复方案

删除多余的非模块化firebase-database脚本引入，所有Firebase SDK均通过ES模块方式导入
放弃内联onclick事件绑定，在模块脚本内通过DOM API绑定按钮点击事件，规避全局作用域问题
补全所有缺失的闭合标签、函数括号，改用Firebase v9对应的模块化API编写数据库写入逻辑
给按钮添加type="button"属性，阻止默认的表单提交刷新行为
补全firebaseConfig配置中的databaseURL字段（格式为https://<你的项目ID>-default-rtdb.firebaseio.com/，可在Firebase控制台实时数据库页面查看），否则无法建立数据库连接

修复后的完整可运行代码如下：

<script type="module">
  // 导入所需SDK方法
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.4/firebase-app.js";
  import { getDatabase, ref, set } from "https://www.gstatic.com/firebasejs/9.8.4/firebase-database.js";

  // 替换为你自己项目的完整Firebase配置
  const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    databaseURL: "", // 该字段必填，否则无法连接实时数据库
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
  };

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

  // 数据写入逻辑
  function writeUserData() {
    const uId = document.getElementById('fname').value.trim();
    const refercode = document.getElementById('lname').value.trim();
    if (!uId || !refercode) return;
    
    set(ref(db, 'users'), {
      uId: uId,
      refercode: refercode
    }).then(() => {
      alert("提交成功");
      document.myForm.reset();
    }).catch((err) => {
      console.error("写入失败：", err);
      alert("提交失败，请查看控制台错误");
    });
  }

  // DOM加载完成后绑定按钮事件
  document.addEventListener('DOMContentLoaded', () => {
    const submitBtn = document.querySelector('.button');
    submitBtn.addEventListener('click', writeUserData);
  });
</script>

<form name="myForm">
  <div class="col-25">
    <label for="fname">text1</label>
  </div>
  <div class="col-75">
    <input type="text" id="fname" name="firstname" placeholder="Your PlayStore Email.." required>
  </div>
  <div class="col-25">
    <label for="lname">text2</label>
  </div>
  <div class="col-75">
    <input type="text" id="lname" name="codename" placeholder="Your Refer Code.." required>
  </div>
  <button type="button" class="button">Request Withdrawal</button>
</form>

额外注意事项

测试阶段需要先去Firebase控制台调整实时数据库规则，临时开放读写权限，否则会抛出权限拒绝错误。测试规则可参考：

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

该规则完全公开数据库读写权限，仅适合本地调试，正式上线前必须替换为带身份校验的安全规则，避免数据库被恶意篡改

当前代码里的set(ref(db, 'users'))会直接覆盖users节点下的所有历史数据，如果需要新增条目而非全量覆盖，应该改用push方法生成唯一子节点key，或把路径指定为具体的用户唯一ID，例如ref(db, users/${自定义用户ID})。

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