如何在Firebase(v9.0.0)数据库中存储与读取多组数据——React实现Tinder克隆的技术问询

嘿，作为Firebase和React新手，你已经走到监听数据这一步已经很棒啦！让我帮你把剩下的环节理顺——不管是把Firebase里的buddies数据存到React状态里用来渲染卡片，还是往集合里添加新数据，都给你讲清楚～

先搞懂你现有代码里的unsub #

你猜的没错！unsub是onSnapshot返回的取消监听函数。因为onSnapshot会实时监听集合的变化（比如新增、修改数据时自动更新），如果组件卸载了还不取消监听，会导致内存泄漏。所以一定要在useEffect里返回这个函数，像这样：

useEffect(() => {
  const q = query(collection(database, 'buddies')) 
  const unsub = onSnapshot(q, (querySnapshot) => {
    // 处理数据的逻辑
  }); 

  // 组件卸载时停止监听
  return () => unsub();
}, []);

把Firebase数据存到React状态，用来渲染滑动卡片 #

你现在的代码只是在控制台打印数据，接下来要把这些数据存到buddies状态里，这样就能在组件里用它渲染卡片了。修改后的代码如下：

import { useState, useEffect } from 'react';
import { query, collection, onSnapshot } from "firebase/firestore";

function SwipeCards() { 
  const [buddies, setBuddies] = useState([]); 

  useEffect(() => { 
    const q = query(collection(database, 'buddies')) 
    const unsub = onSnapshot(q, (querySnapshot) => { 
      // 把每个文档的ID和数据合并（ID在后续做删除/修改时会有用）
      const fetchedBuddies = querySnapshot.docs.map(doc => ({
        id: doc.id,
        ...doc.data() // 展开name、picture、info字段
      }));
      // 更新状态
      setBuddies(fetchedBuddies);
      console.log('实时更新的好友数据:', fetchedBuddies);
    }); 

    // 组件卸载时取消监听
    return () => unsub();
  }, []); 

  // 用buddies数组渲染滑动卡片
  return (
    <div className="swipe-card-container">
      {/* 给每个卡片加唯一key，React渲染列表必须要 */}
      {buddies.map(buddy => (
        <div key={buddy.id} className="swipe-card">
          <img 
            src={buddy.picture} 
            alt={`${buddy.name}的头像`}
            className="card-image"
          />
          <div className="card-content">
            <h2>{buddy.name}</h2>
            <p className="card-info">{buddy.info}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

这样一来，buddies状态里就存了所有从Firebase拉取的用户数据，你可以直接用它来渲染卡片。如果后续Firebase里的buddies集合新增或修改了数据，onSnapshot会自动触发更新状态，页面也会实时刷新～

往Firebase的buddies集合里存储多组数据 #

如果需要添加新的好友数据到集合里，可以用Firestore的addDoc方法。比如你做了一个表单用来录入新用户信息，就可以写一个这样的函数：

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

// 异步函数：添加新好友到Firebase
const addNewBuddy = async (newBuddy) => {
  try {
    // 往buddies集合里添加文档
    const docRef = await addDoc(collection(database, 'buddies'), {
      name: newBuddy.name,
      picture: newBuddy.picture,
      info: newBuddy.info
    });
    console.log('新好友添加成功，文档ID:', docRef.id);
  } catch (error) {
    console.error('添加好友失败:', error);
  }
};

// 调用示例：比如表单提交时
// addNewBuddy({
//   name: "Luna",
//   picture: "https://example.com/luna.jpg",
//   info: "喜欢撸猫、看科幻电影，周末常去书店"
// });

新手友好的小提示 #

• Firebase权限设置：开发阶段可以暂时把Firestore的规则设置为允许读写（但上线一定要改！），不然会报错无法访问数据。规则大概是这样：

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

• 滑动卡片动画：不用自己从零写滑动逻辑，可以用react-tinder-card这种第三方库，直接把你渲染的卡片组件包进去就行，省很多事～
• 数据分页（可选）：如果buddies集合里的数据特别多，可以考虑用limit和startAfter做分页，避免一次性拉取太多数据影响性能，但新手先把基础功能跑通再说～

如果还有具体的问题（比如滑动逻辑和数据结合的问题，或者数据更新的异常），随时补充代码细节就行！

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