React Native中在指定Firestore集合创建文档报错求助

问题背景 #

在React Native项目中，需要将新注册用户的信息存入其选择的团队对应的Firestore集合。用户注册时选择所属团队，注册成功后将包含uid、姓名、邮箱等信息的用户资料写入该团队集合。目前已确认Firebase配置可正常实现登录及读取Firestore数据，但执行创建文档的代码时出现「TypeError: undefined is not a function」错误。

注册函数代码 #

import { auth, db, firestore } from '../firebaseConfig';

const registerUser = async () => {
    if (password !== confirmPassword) {
      alert("密码不匹配。");
      return;
    }

    try {
      const userCredential = await createUserWithEmailAndPassword(auth, email, password);
      const { user } = userCredential;
      const userProfile = {
        uid: user.uid,
        firstName,
        lastName,
        email,
        team,
        fullførteKurs: [],
      };

      try {
        console.log(team);
        console.log(user.uid);
        console.log(userProfile);
        await db.collection(team).doc(user.uid).set(userProfile); // 创建文档的代码

      } catch (error) {
        console.error("创建用户文档出错: ", error);
      }
      alert('用户注册成功');
    } catch (error) {
      alert(error.message);
    }
  };

Firebase配置代码 #

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore';
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
    apiKey: "...",
    authDomain: "...",
    projectId: "...",
    storageBucket: "...",
    messagingSenderId: "...",
    appId: "...",
    measurementId: "..."
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app);
export { auth, db, collection, getDocs };

报错信息 #

Error creating user document: , [TypeError: undefined is not a function]
at screens\RegisterScreen.js:null in registerUser
at node_modules\@babel\runtime\helpers\asyncToGenerator.js:null in asyncGeneratorStep
at node_modules\@babel\runtime\helpers\asyncToGenerator.js:null in _next
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _allocateCallback$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _callTimer
- ... 8 more stack frames from framework internals  

问题原因及解决方法 #

核心原因 #

你当前混用了Firebase v9+的模块化API与旧版命名空间API的写法：db.collection()这种链式调用是旧版API的用法，而Firebase v9+要求使用独立的collection、doc、setDoc函数；同时代码中缺失必要的函数导入。

修复步骤 #

1. 更新Firebase配置文件，补充导出写入操作所需的函数：

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs, doc, setDoc } from 'firebase/firestore'; // 新增doc、setDoc
import { getAuth, createUserWithEmailAndPassword } from 'firebase/auth'; // 新增注册函数

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

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app);
export { auth, db, collection, getDocs, doc, setDoc, createUserWithEmailAndPassword }; // 导出新增函数

2. 修改注册函数代码，改用模块化API的写法：

import { auth, db, doc, setDoc, createUserWithEmailAndPassword } from '../firebaseConfig'; // 导入正确的函数

const registerUser = async () => {
    if (password !== confirmPassword) {
      alert("密码不匹配。");
      return;
    }

    try {
      const userCredential = await createUserWithEmailAndPassword(auth, email, password);
      const { user } = userCredential;
      const userProfile = {
        uid: user.uid,
        firstName,
        lastName,
        email,
        team,
        fullførteKurs: [],
      };

      try {
        console.log(team);
        console.log(user.uid);
        console.log(userProfile);
        // 先获取文档引用，再执行写入
        const userDocRef = doc(db, team, user.uid);
        await setDoc(userDocRef, userProfile);
      } catch (error) {
        console.error("创建用户文档出错: ", error);
      }
      alert('用户注册成功');
    } catch (error) {
      alert(error.message);
    }
  };

3. 额外检查：确保team变量有有效值（非空、非undefined），避免因集合路径无效引发新错误。

内容的提问来源于stack exchange，提问作者Anthony Leinebø