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

在 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 函数。

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

    无限画

    千库网旗下ai绘画创作平台

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

    查看详情 在 React Native 中创建 Firestore 文档到指定集合

    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 word js app ai red 命名空间 try catch Error Collection JS console undefined function 对象 数据库 react native

上一篇
下一篇