Flutter Web中Firebase Firestore数据操作无响应问题求助

一、修复按钮点击事件的代码错误 #

你的前两个按钮onPressed参数写法有误，没有实际调用函数，导致点击无响应：

原错误代码：

ElevatedButton(
    onPressed: () => addData,
    child: const Text('Add data with ADD')),
ElevatedButton(
    onPressed: () => addDataWithSet,
    child: const Text('Add data with SET')),

修改为以下两种写法之一即可：

// 写法1：显式调用函数
ElevatedButton(
    onPressed: () => addData(),
    child: const Text('Add data with ADD')),
ElevatedButton(
    onPressed: () => addDataWithSet(),
    child: const Text('Add data with SET')),

// 写法2：直接传递函数引用（async函数可直接作为VoidCallback）
ElevatedButton(
    onPressed: addData,
    child: const Text('Add data with ADD')),
ElevatedButton(
    onPressed: addDataWithSet,
    child: const Text('Add data with SET')),

二、补充index.html中的Firestore初始化代码 #

你当前的index.html只初始化了Firebase App和Analytics，但缺少Firestore模块的导入与初始化，Flutter Web的cloud_firestore包依赖该JS模块才能正常工作。

修改后的index.html脚本部分：

<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.9.1/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.9.1/firebase-analytics.js";
// 新增：导入Firestore模块
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.9.1/firebase-firestore.js";

const firebaseConfig = {
  // 你的配置信息
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
// 新增：初始化Firestore实例
const db = getFirestore(app);
</script>

额外检查项 #

• 确认Firebase项目已启用Cloud Firestore服务
• 检查Firebase安全规则是否允许当前操作（开发阶段可临时设置为开放规则，上线前必须修改）：

  rules_version = '2';
  service cloud.firestore {
    match /databases/{database}/documents {
      match /{document=**} {
        allow read, write: if true;
      }
    }
  }
  

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