本文档旨在指导开发者如何在 react Native 应用中使用 Firebase Firestore SDK (v9 及以上版本) 创建文档到指定集合中。我们将详细讲解如何使用模块化的 Firebase 语法，避免常见的 TypeError: undefined is not a function 错误，并提供清晰的代码示例和注意事项，帮助开发者快速上手。
使用 Firebase Firestore SDK (v9+) 创建文档
在 react native 项目中使用 Firebase Firestore，特别是创建文档到特定集合时，需要注意 Firebase SDK 的版本和相应的语法。 如果你的项目中使用的是 Firebase SDK v9 及以上版本，那么必须使用模块化的语法。 混合使用旧版本（v8 及之前）的命名空间语法和新版本的模块化语法会导致错误，例如 TypeError: undefined is not a function。
以下是如何正确配置和使用 Firebase Firestore SDK (v9+) 在 React Native 应用中创建文档的步骤：
1. 安装 Firebase 依赖
首先，确保你的 React Native 项目已经安装了必要的 Firebase 依赖。如果还没有安装，可以使用以下命令进行安装：
npm install @react-native-firebase/app @react-native-firebase/firestore @react-native-firebase/auth
或者使用 yarn:
yarn add @react-native-firebase/app @react-native-firebase/firestore @react-native-firebase/auth
2. 初始化 Firebase
在你的 firebaseConfig.js 文件中，使用模块化的方式初始化 Firebase：
import { initializeApp } from 'firebase/app'; import { getFirestore } 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 };
3. 创建文档到指定集合
在你的注册函数或者其他需要创建文档的地方，使用 setDoc 和 doc 函数来创建文档。 假设你有一个 team 变量和一个 user.uid 变量，你需要将 userProfile 数据保存到以 team 为名称的集合中，并将文档 ID 设置为 user.uid。
import { auth, db } from '../firebaseConfig'; 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 { // 使用 setDoc 和 doc 创建文档 await setDoc(doc(db, team, user.uid), userProfile); alert('User registered successfully'); } catch (error) { console.error("Error creating user document: ", error); alert('Error creating user document: ' + error.message); } } catch (error) { alert(error.message); } }; export default registerUser;
代码解释：
- import { doc, setDoc } from “firebase/firestore”;: 导入必要的函数。 doc 函数用于创建一个对文档的引用，setDoc 函数用于将数据写入文档。
- doc(db, team, user.uid): 创建一个文档引用。 db 是你的 Firestore 实例，team 是集合的名称，user.uid 是文档的 ID。
- setDoc(doc(db, team, user.uid), userProfile): 将 userProfile 数据写入到指定的文档中。
4. 错误处理
在 try…catch 块中处理可能出现的错误，并使用 console.error 记录错误信息。 建议在alert中显示error.message，方便调试。
注意事项：
- 确保 Firebase SDK 版本正确： 确认你的项目使用的是 Firebase SDK v9 及以上版本。
- 使用模块化语法： 始终使用模块化的语法来调用 Firebase 函数。
- 检查 Firebase 配置： 确保你的 Firebase 配置正确，并且你的应用有权限访问 Firestore。
- 处理权限问题： 确保你的 Firestore 安全规则允许你创建文档。
总结：
通过遵循以上步骤，你可以在 React Native 应用中使用 Firebase Firestore SDK (v9+) 创建文档到指定的集合中。 关键在于使用模块化的语法，正确导入所需的函数，并确保你的 Firebase 配置和安全规则正确设置。 遵循这些最佳实践可以避免常见的错误，并确保你的应用能够安全可靠地与 Firestore 交互。
评论（已关闭）
评论已关闭