如何将Firebase V8的Firestore代码迁移至Firebase V9版本？

以下是针对你提供的代码进行的Firebase V9适配修改，核心是把V8的链式调用替换为V9的模块化函数调用：

步骤1：修正导入语句 #

首先确保你从firebase/firestore导入正确的模块化函数，并且从你的firebase配置文件中导入初始化好的db实例：

import React, {useEffect, useState} from 'react';
import './Orders.css'
import {useStateValue} from "./StateProvider";
import Order from "./Order";
// 导入Firebase V9 Firestore必需的函数
import { collection, doc, query, orderBy, onSnapshot } from "firebase/firestore";
// 从你的firebase配置文件（比如firebase.js）导入初始化好的db实例
import { db } from "./firebase";

步骤2：重构useEffect中的查询逻辑 #

Firebase V9使用函数式组合替代V8的链式调用，同时注意useEffect的回调不能直接使用await，需要包裹在异步函数内：

function Orders() {
    const [{ basket, user}, dispatch] = useStateValue();
    const [orders, setOrders] = useState([]);

    useEffect(() => {
        let unsubscribe; // 用于清理监听
        
        if (user) {
            // 构建查询：用户 -> 订单集合，按created字段倒序
            const ordersRef = collection(db, 'users', user.uid, 'orders');
            const q = query(ordersRef, orderBy('created', 'desc'));
            
            // 监听快照变化
            unsubscribe = onSnapshot(q, (snapshot) => {
                setOrders(snapshot.docs.map(doc => ({
                    id: doc.id,
                    data: doc.data()
                })))
            });

            // 如果你确实需要执行setDoc操作（原代码中的空对象可能是测试用），要包裹在async函数里
            const setUserDoc = async () => {
                const userDoc = doc(db, 'users', user.uid);
                // await setDoc(userDoc, { /* 你的数据 */ });
            };
            setUserDoc();
        } else {
            setOrders([]);
        }

        // 组件卸载时清理监听，避免内存泄漏
        return () => {
            if (unsubscribe) unsubscribe();
        };
    }, [user])

    return (
        <div className="orders">
            <h1> 주문내역 </h1>

            <div className='orders_order'>
                {orders?.map(order => (
                    <Order order={order} />
                ))}
            </div>
        </div>
    );
}

export default Orders;

关键变化说明 #

• 集合/文档引用：V8的db.collection('users').doc(user.uid).collection('orders')在V9中简化为collection(db, 'users', user.uid, 'orders')，直接通过路径参数定位集合
• 查询构建：使用query()函数组合集合引用和排序规则orderBy()，替代V8的链式调用
• 快照监听：onSnapshot()函数接收查询对象作为第一个参数，回调逻辑和V8一致，但需要保存返回的取消函数用于组件卸载时清理
• 异步操作：useEffect回调不能直接用await，所以把setDoc这类异步操作包裹在内部的async函数中执行

内容的提问来源于stack exchange，提问作者김희태