React向Firestore批量添加用户数组无数据的问题求助

尝试将用户数组批量添加到Firestore数据库，逻辑看似可行但集合中无数据生成，相关代码如下：

用户数据添加代码：

import { addDoc ,  collection , setDoc , doc , getDocs} from "firebase/firestore";
import { db } from "./config";

 const Users = [
    {
      userId: "XF9EvlJQZHfZEClM23Bd39A7gai1",
      username: "John",
      fullName: "John John",
      emailAddress: "John@gmail.com",
      dateCreated: Date.now(),
    },
    {
      userId: "XF9EvlJQZHfZEClM23Bd39A7gai1",
      username: "John",
      fullName: "John John",
      emailAddress: "John@gmail.com",
      dateCreated: Date.now(),
    }]

Users.forEach(async (user) => {
     try {
      const docRef = await addDoc (collection(db , "users" , user.userId) ,{
        userId: user.userId,
        username: user.username,
        fullName: user.fullName,
        emailAddress: user.emailAddress,
        dateCreated: user.dateCreated,
      })
      console.log("Document written with ID : ",docRef.id)
     } catch(err){
      console.error("Error adding document ",err)
     }
 })

Firebase配置代码：

import { initializeApp } from "firebase/app";
import { getStorage } from 'firebase/storage';
import { getFirestore } from 'firebase/firestore';
import { getAuth } from "firebase/auth";


const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

export const app = initializeApp(firebaseConfig);
export const storage = getStorage();
export const db = getFirestore(app);
export const auth = getAuth();

问题排查与修复方案 #

1. 修正集合路径写法 #

你当前用collection(db , "users" , user.userId)会创建嵌套集合：users/{userId}/[自动生成文档ID]，而非将用户文档直接放在users集合下。根据需求二选一：

• 若要以userId作为文档ID，用setDoc：

await setDoc(doc(db, "users", user.userId), {
  userId: user.userId,
  username: user.username,
  fullName: user.fullName,
  emailAddress: user.emailAddress,
  dateCreated: user.dateCreated,
});

• 若要自动生成文档ID，用addDoc直接写入users集合：

await addDoc(collection(db, "users"), {
  userId: user.userId,
  username: user.username,
  fullName: user.fullName,
  emailAddress: user.emailAddress,
  dateCreated: user.dateCreated,
});

2. 修复异步循环问题 #

forEach不支持等待异步函数，导致部分写入请求可能未完成就结束程序。改成以下两种方式：

方式一：for...of循环（串行处理）

async function addUsers() {
  for (const user of Users) {
    try {
      await setDoc(doc(db, "users", user.userId), {
        userId: user.userId,
        username: user.username,
        fullName: user.fullName,
        emailAddress: user.emailAddress,
        dateCreated: user.dateCreated,
      });
      console.log(`用户 ${user.userId} 已添加`);
    } catch (err) {
      console.error(`添加用户 ${user.userId} 失败:`, err);
    }
  }
}

// 调用执行
addUsers();

方式二：Promise.all（批量并行处理）

async function addUsers() {
  const writePromises = Users.map(user => 
    setDoc(doc(db, "users", user.userId), {
      userId: user.userId,
      username: user.username,
      fullName: user.fullName,
      emailAddress: user.emailAddress,
      dateCreated: user.dateCreated,
    })
  );
  try {
    await Promise.all(writePromises);
    console.log("所有用户已批量写入");
  } catch (err) {
    console.error("批量写入失败:", err);
  }
}

addUsers();

3. 检查Firestore权限规则 #

默认权限规则会拒绝所有写入操作，开发阶段可临时设置为：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

注意：上线前必须修改为安全的权限规则，避免数据泄露。

4. 验证配置有效性 #

确认firebaseConfig中的projectId等参数填写正确，可在代码中打印console.log(db)验证Firestore实例是否初始化成功。

内容的提问来源于stack exchange，提问作者MH_Rabea