如何用React、Javascript、Firebase将待办数据存入登录用户的个人档案

核心逻辑 #

每个Firebase Auth登录的用户都会分配全局唯一的uid，这是关联用户和业务数据的核心标识，你只需要把这个uid和待办数据绑定存储，查询时按uid过滤即可，以下是可直接落地的分步实现： #

分步实现 #

1. 先获取当前登录用户的uid #

首先确保你已正确初始化Firebase Auth，在创建待办的逻辑执行前，先监听获取当前登录用户的id：

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth();
let currentUserId = null;

// 监听用户登录状态变化，实时更新当前用户id
onAuthStateChanged(auth, (user) => {
  if (user) {
    currentUserId = user.uid;
  } else {
    currentUserId = null;
    // 未登录状态可自行添加跳转登录页的逻辑
  }
});

注意：必须判断用户处于登录状态（currentUserId不为空）才允许执行待办的增删改查操作，避免非法请求。

2. 存储待办时关联用户uid，两种可选方案 #

你可以根据自己的业务需求选其中一种即可：

• 方案1：所有待办统一存在todos集合，每个待办文档新增userId字段绑定对应用户

import { getFirestore, collection, addDoc } from "firebase/firestore";

const db = getFirestore();
// 创建待办的提交逻辑
const createTodo = async (todoContent) => {
  if (!currentUserId) return alert("请先登录后再操作");
  try {
    await addDoc(collection(db, "todos"), {
      content: todoContent,
      userId: currentUserId, // 绑定当前登录用户的uid
      createTime: new Date()
    });
  } catch (e) {
    console.error("待办创建失败：", e);
  }
}

• 方案2：每个用户拥有独立的待办子集合，把uid作为父级路径
  该方案后续查询、权限控制更简单，更推荐新手使用：

const createTodo = async (todoContent) => {
  if (!currentUserId) return alert("请先登录后再操作");
  try {
    // 路径格式为 users/[当前用户uid]/todos，每个用户的待办存在自己的子集合下
    await addDoc(collection(db, "users", currentUserId, "todos"), {
      content: todoContent,
      createTime: new Date()
    });
  } catch (e) {
    console.error("待办创建失败：", e);
  }
}

3. 查询当前用户的待办列表 #

对应上面两种存储方案，查询逻辑分别如下：

• 方案1对应的查询逻辑：

import { getFirestore, collection, query, where, getDocs } from "firebase/firestore";

const getMyTodos = async () => {
  if (!currentUserId) return [];
  // 按当前用户的uid过滤待办列表
  const q = query(collection(db, "todos"), where("userId", "==", currentUserId));
  const querySnapshot = await getDocs(q);
  const todoList = [];
  querySnapshot.forEach((doc) => {
    todoList.push({id: doc.id, ...doc.data()});
  });
  // 把返回的todoList存入React state即可渲染到页面
  return todoList;
}

• 方案2对应的查询逻辑：

const getMyTodos = async () => {
  if (!currentUserId) return [];
  const querySnapshot = await getDocs(collection(db, "users", currentUserId, "todos"));
  const todoList = [];
  querySnapshot.forEach((doc) => {
    todoList.push({id: doc.id, ...doc.data()});
  });
  return todoList;
}

安全规则补充 #

必须配置Firebase Firestore安全规则，避免其他用户越权访问、篡改他人的待办数据，对应两种方案的规则示例如下：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // 方案1对应的安全规则
    match /todos/{todoId} {
      allow read, update, delete: if request.auth != null && resource.data.userId == request.auth.uid;
      allow create: if request.auth != null && request.resource.data.userId == request.auth.uid;
    }
    // 方案2对应的安全规则
    match /users/{userId}/todos/{todoId} {
      allow read, write: if request.auth != null && userId == request.auth.uid;
    }
  }
}

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