本文旨在帮助 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 的模块化语法。
-
导入必要的函数:
首先,需要从 @firebase/firestore 模块中导入 setDoc 和 doc 函数。
import { getFirestore, doc, setDoc } from 'firebase/firestore';
-
使用 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