网页端无法向Cloud Firestore写入数据问题求助

问题修复方案 #

• 修复SDK版本不兼容问题
  你当前混用了v9模块化版本和v8传统版本的Firebase SDK，是运行异常的核心原因，需统一所有SDK导入版本为v9，同时导入Firestore操作需要的collection、addDoc方法：

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.1.2/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.1.2/firebase-analytics.js";
import { getFirestore, collection, addDoc } from "https://www.gstatic.com/firebasejs/9.1.2/firebase-firestore.js";

• 修正Firestore实例初始化逻辑
  初始化Firestore时需要传入已经创建好的app实例，关联到你的Firebase项目：

const firebaseConfig = {...}; // 替换为你自己的项目配置
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const db = getFirestore(app); // 需传入app参数

• 修正输入值获取与文档写入逻辑
  你原先在页面加载时就获取输入框值，此时用户尚未输入内容，且v9版本没有db.collection().add()的写法，需调整为v9对应的API，同时把取值逻辑放到点击事件触发的函数内部：

function clubname() {
  // 点击按钮时再读取当前输入框的内容
  const name = document.getElementById('cbname').value;
  // 使用v9版本的addDoc方法写入数据
  addDoc(collection(db, "latest"), {
    clubName: name
  }).then((docRef) => {
    console.log("Document written with ID: ", docRef.id);
  }).catch((error) => {
    console.error("Error adding document: ", error);
  });
}

• 检查Firestore安全规则
  Cloud Firestore默认安全规则禁止所有读写操作，测试阶段可临时修改为允许读写的规则（正式上线前必须调整为符合业务逻辑的权限规则）：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.time < timestamp.date(2024, 12, 31);
    }
  }
}

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