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

本文档旨在指导开发者如何在 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. 创建文档到指定集合

CreateWise AI

为播客创作者设计的AI创作工具，AI自动去口癖、提交亮点和生成Show notes、标题等

40

查看详情

在你的注册函数或者其他需要创建文档的地方，使用 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 交互。