Firebase v9模块化语法下Firestore的collection属性不存在错误排查

错误原因 #

Firebase v9采用模块化API，彻底抛弃了v8及之前的命名空间链式调用（如db.collection()），所有Firestore操作都需使用独立导入的函数，而非数据库实例的方法。你的代码虽初始化了模块化的db，但仍沿用旧链式调用写法，还混用了旧版firebase/app导入，最终触发类型报错。

修复步骤 #

1. 统一使用模块化导入
   移除旧版的firebase/app和firebase/firestore导入，改用Firebase v9的模块化导入方式：

// 替换原有的firebase导入
import { initializeApp } from 'firebase/app';
import { getFirestore, collection, doc, setDoc } from 'firebase/firestore';

2. 修正Firebase初始化代码
   用模块化的initializeApp替代旧的firebase.initializeApp：

// 初始化Firebase应用
const app = initializeApp(appConfig);
// 初始化Firestore数据库
const db = getFirestore(app);

3. 修改sendData函数的调用逻辑
   使用导入的collection、doc、setDoc函数替代链式调用：

export async function sendData(data: any, id: string) {
  // 分步获取集合、文档引用，再执行写入
  const contactCollection = collection(db, 'contact-form');
  const docRef = doc(contactCollection, id);
  await setDoc(docRef, { content: data });
}

也可简化为一行：

export async function sendData(data: any, id: string) {
  await setDoc(doc(db, 'contact-form', id), { content: data });
}

额外优化建议 #

• 你的processData函数的try块缺少对应的catch分支，建议补充以处理错误：

try {
  if (data.name === '') throw("Name cannot be left empty")
  if (data.email === '') throw("Email cannot be left empty")
  if (data.message === '') throw("Message cannot be left empty")

  await sendData(data, randomString(10))
  alert("消息发送成功！")
} catch (error) {
  alert(`发送失败：${error}`)
}

• 确认firebase和@firebase/firestore依赖均为v9及以上版本，避免版本不一致引发问题。

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