React开发联系页调用Firebase时出现db.collection is not a function错误

错误原因 #

你使用的是Firebase 9+ 模块化版本，该版本废弃了旧版命名空间式的db.collection()写法，必须使用新的模块化函数API实现数据写入。

修复步骤 #

1. 首先在Contact组件头部新增Firestore相关函数的导入
2. 替换原有db.collection().add()写法为模块化的collection() + addDoc()组合写法

完整修改后的Contact组件代码 #

import React, { useState } from 'react';
import '../App.css';
import { db } from '../firebase';
// 新增导入
import { collection, addDoc } from 'firebase/firestore'

const Contact = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      // 替换原有写法
      await addDoc(collection(db, 'contacts'), {
        name: name,
        email: email,
        message: message,
      })
      alert('Message submitted 👍' );
      setName('');
      setEmail('');
      setMessage('');
    } catch (error) {
      alert(error.message)
    }
  };

  return (
    // 原有页面渲染逻辑保留即可
  )
}

export default Contact

注：你的firebase.js配置文件写法本身没有问题，不需要修改。

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