在 React Native 中创建 Firestore 文档到指定集合

本文旨在帮助 React Native 开发者解决在使用 Firebase Firestore 时，如何将文档创建到指定集合中的问题。我们将探讨如何使用 Firebase SDK v9 的模块化语法，正确地创建和存储用户信息到 Firestore 数据库中，并提供详细的代码示例和注意事项，确保数据操作的准确性和高效性。

在 React Native 应用中使用 Firebase Firestore 时，将用户数据存储到特定集合中是一个常见的需求，例如，根据用户所属团队进行分类存储。当遇到 "TypeError: undefined is not a function" 错误时，通常是由于混用了 Firebase SDK 的不同版本语法造成的。以下将详细介绍如何使用 Firebase SDK v9 的模块化语法，正确地创建 Firestore 文档到指定集合。

使用 Firebase SDK v9 的模块化语法

Firebase SDK v9 引入了模块化语法，相比之前的命名空间语法，它具有更好的代码体积优化和类型安全。在使用 Firestore 时，需要确保整个项目都使用统一的语法风格。

问题原因分析：

示例代码中，createUserWithEmailAndPassword 使用了 SDK v9 的模块化语法，而 db.collection(team).doc(user.uid).set(userProfile) 却使用了旧的命名空间语法。这会导致 db.collection 无法正确识别，从而抛出 "undefined is not a function" 错误。

解决方案：

将旧的命名空间语法替换为 SDK v9 的模块化语法。

1. 导入必要的函数：

   首先，需要从 @firebase/firestore 模块中导入 setDoc 和 doc 函数。

   

   千面视频动捕

   千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

   173

   查看详情

   import { getFirestore, doc, setDoc } from 'firebase/firestore';

   登录后复制

2. 使用 setDoc 和 doc 创建文档：

   使用 doc 函数创建一个文档引用，然后使用 setDoc 函数将数据写入该文档。

   const db = getFirestore(); // 获取 Firestore 实例
   await setDoc(doc(db, team, user.uid), userProfile);

   登录后复制

   这里的 doc(db, team, user.uid) 创建了一个指向 team 集合中，ID 为 user.uid 的文档的引用。setDoc 函数则将 userProfile 对象的数据写入该文档。

完整示例代码：

以下是修改后的 registerUser 函数示例：

import { auth, db } from '../firebaseConfig'; // 确保 db 是 getFirestore() 的结果
import { createUserWithEmailAndPassword } from "firebase/auth";
import { doc, setDoc } from "firebase/firestore";

const registerUser = async (email, password, confirmPassword, firstName, lastName, team) => {
    if (password !== confirmPassword) {
      alert("Passwords don't match.");
      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 setDoc(doc(db, team, user.uid), userProfile); // 使用 v9 语法创建文档

      } catch (error) {
        console.error("Error creating user document: ", error);
      }
      alert('User registered successfully');
    } catch (error) {
      alert(error.message);
    }
  };

注意事项：

• Firebase 配置： 确保 firebaseConfig.js 文件正确配置，并且 db 变量是通过 getFirestore(app) 获取的 Firestore 实例。
• 错误处理： 在 try...catch 块中捕获错误，并使用 console.error 打印详细的错误信息，方便调试。
• 数据验证： 在写入 Firestore 之前，对用户输入的数据进行验证，确保数据的有效性和安全性。
• 依赖版本： 确保所有 Firebase 相关的依赖包版本一致，避免出现兼容性问题。

总结：

通过将 Firebase SDK 的命名空间语法替换为模块化语法，可以解决 "undefined is not a function" 错误，并正确地将文档创建到 Firestore 的指定集合中。在使用 Firebase SDK 时，务必注意保持语法风格的一致性，并参考官方文档进行开发。

以上就是在 React Native 中创建 Firestore 文档到指定集合的详细内容，更多请关注php中文网其它相关文章！