如何基于React与Firebase实现已登录用户购物车数据持久化

步骤1：配置Firebase Firestore数据库 #

首先在Firebase初始化文件中添加Firestore配置，用于存储用户购物车数据：

// firebase.js
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  // 你的Firebase项目配置信息
};

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

步骤2：重构App层的状态与逻辑 #

将购物车状态提升到App组件，同时结合用户登录状态完成购物车数据的加载与同步：

// App.js
import Header from "./components/Header/Header";
import Cart from "./pages/Cart";
import Profile from "./pages/Profile";
import { auth, db } from "./firebase";
import { useState, useEffect } from "react";
import { doc, getDoc, setDoc, updateDoc } from "firebase/firestore";

function App() {
    const [profileUser, setProfileUser] = useState(null);
    const [userName, setUserName] = useState(null);
    const [cartItems, setCartItems] = useState([]);

    // 监听用户登录状态，同步购物车数据
    useEffect(() => {
        const unsubscribe = auth.onAuthStateChanged(async (user) => {
            if (user) {
                setUserName(user.displayName);              
                setProfileUser(user);
                // 加载用户的Firebase购物车
                const cartDoc = doc(db, "userCarts", user.uid);
                const cartSnapshot = await getDoc(cartDoc);
                if (cartSnapshot.exists()) {
                    setCartItems(cartSnapshot.data().items);
                } else {
                    // 首次登录创建空购物车文档
                    await setDoc(cartDoc, { items: [] });
                    setCartItems([]);
                }
            } else {
                setUserName(null);
                setProfileUser(null);
                // 未登录时读取本地购物车（保留你原有的逻辑）
                const localCart = JSON.parse(localStorage.getItem("cart")) || [];
                setCartItems(localCart);
            }
        });

        return unsubscribe; // 清理监听
    }, []);

    // 封装购物车更新方法，同步到对应存储介质
    const updateCart = async (newItems) => {
        setCartItems(newItems);
        if (profileUser) {
            // 已登录用户同步到Firebase
            const cartDoc = doc(db, "userCarts", profileUser.uid);
            await updateDoc(cartDoc, { items: newItems });
        } else {
            // 未登录用户存到本地
            localStorage.setItem("cart", JSON.stringify(newItems));
        }
    };

    return (
        <div>
            <Header loggedUser={userName} />
            <MainWrapper>
                <Routes>
                    <Route path="/cart" element={<Cart cartItems={cartItems} updateCart={updateCart} />} /> 
                    <Route path="/profile" element={<Profile loggedUser={profileUser}/>} />
                </Routes>
            </MainWrapper>
        </div>
    );
}

步骤3：修改Cart组件使用传入的状态与方法 #

将Cart组件的内部状态改为接收props，所有购物车操作通过updateCart方法同步：

// Cart.js
export default function Cart({ cartItems, updateCart }) {
    // 新增商品逻辑
    const addToCart = (product) => {
        const existingItem = cartItems.find(item => item.id === product.id);
        const newItems = existingItem 
            ? cartItems.map(item => item.id === product.id ? {...item, quantity: item.quantity + 1} : item)
            : [...cartItems, {...product, quantity: 1}];
        updateCart(newItems);
    };

    // 删除商品逻辑
    const removeFromCart = (productId) => {
        const newItems = cartItems.filter(item => item.id !== productId);
        updateCart(newItems);
    };

    // 修改商品数量等其他逻辑同理，均调用updateCart同步

    return (
        <div className="cart-container">
            {cartItems.map(item => (
                <div key={item.id} className="cart-item">
                    <h4>{item.name}</h4>
                    <span>数量: {item.quantity}</span>
                    <button onClick={() => addToCart(item)}>增加</button>
                    <button onClick={() => removeFromCart(item.id)}>删除</button>
                </div>
            ))}
        </div>
    );
}

步骤4：配置Firebase安全规则 #

确保只有用户本人能访问自己的购物车数据，在Firebase控制台的Firestore规则中设置：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /userCarts/{userId} {
      allow read, write: if request.auth != null && request.auth.uid == userId;
    }
  }
}

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