点击HTML按钮触发Uncaught ReferenceError: writeData is not defined错误如何解决

报错原因 #

出现未捕获引用错误主要有三类常见原因：

• Firebase 依赖未正确加载初始化：你代码中仅标注了配置注释，实际未导入Firebase核心SDK、实时数据库模块，也未完成项目初始化，全局firebase对象不存在，调用firebase.database()时直接触发引用错误。
• 函数作用域问题：如果你的writeData函数被包裹在DOMContentLoaded、window.onload等回调函数内部，会变成局部作用域函数，按钮的内联onclick事件访问不到全局的writeData，也会触发引用错误。
• SDK 版本不兼容：如果你使用的是Firebase 9及以上的模块化SDK，这类版本默认不暴露全局firebase对象，你沿用旧版本的命名空间写法（firebase.database()）也会触发报错。

修复方案 #

适配Firebase 8及以下旧版本写法（和你现有代码兼容性最高） #

1. 调整HTML代码加载顺序，在<head>标签中按顺序完成：引入Firebase 8版本的核心SDK、实时数据库SDK、粘贴你从Firebase控制台获取的项目配置代码完成初始化，最后再写入你的业务逻辑代码，示例结构如下：

<head>
  <!-- 按顺序引入Firebase 8版本的核心SDK、实时数据库SDK -->
  <script>
    // 此处粘贴你从Firebase控制台获取的初始化配置代码，格式如下
    const firebaseConfig = {
      apiKey: "你的项目apiKey",
      authDomain: "你的项目authDomain",
      databaseURL: "你的项目databaseURL",
      projectId: "你的项目projectId",
      storageBucket: "你的项目storageBucket",
      messagingSenderId: "你的项目messagingSenderId",
      appId: "你的项目appId"
    };
    // 执行初始化
    firebase.initializeApp(firebaseConfig);
  </script>
  <!-- 业务代码放在初始化之后，且不要包裹在其他函数内部，确保writeData是全局函数 -->
  <script>
    function writeData() {
      firebase.database().ref("User").set({
        name: document.getElementById("namefield").value,
        age: document.getElementById("agefield").value
      });
    }
  </script>
</head>
<body>
  <h1>Test</h1>
  <input type="text" placeholder="name" id="namefield">
  <input type="text" placeholder="age" id="agefield">
  <button onclick="writeData()">Submit</button>
</body>

2. 确认你的writeData函数没有被包裹在其他函数作用域内，确保全局可访问。

适配Firebase 9及以上模块化SDK写法 #

如果你使用的是新版本模块化SDK，调整代码写法如下：

1. 将业务逻辑调整为模块化API写法，并将函数挂载到window对象上保证内联事件可以访问：

<script type="module">
  // 导入对应模块化API
  import { initializeApp } from "firebase/app";
  import { getDatabase, ref, set } from "firebase/database";

  // 粘贴你的项目配置
  const firebaseConfig = {
    // 你的项目配置
  };

  // 初始化
  const app = initializeApp(firebaseConfig);
  const db = getDatabase(app);

  // 挂载到window对象，暴露到全局作用域
  window.writeData = function() {
    set(ref(db, 'User'), {
      name: document.getElementById("namefield").value,
      age: document.getElementById("agefield").value
    });
  }
</script>

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