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

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

碧海醫心

发布： 2025-09-14 22:39:24

原创

1024人浏览过

在 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. 创建文档到指定集合

LuckyCola工具库

LuckyCola工具库是您工作学习的智能助手，提供一系列AI驱动的工具，旨在为您的生活带来便利与高效。

133

查看详情

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

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