createAsyncThunk获取Firestore数据后无法传递至React组件问题排查

核心问题 #

你的createAsyncThunk没有正确返回订单数组，导致action.payload为空，redux状态未被正确更新，组件自然拿不到可遍历的数据。

具体错误点及修正方案 #

1. createAsyncThunk 数据收集逻辑错误

你使用querySnapshot.forEach()遍历数据，但forEach不会返回新数组，且内部的return data仅终止当前循环迭代，无法让整个thunk函数返回有效数据。最终getOrders函数没有return任何内容，使得action.payload为undefined，redux中的state.orders被设置为undefined。

修正后的代码：

// getting all orders from the database
export const getOrders = createAsyncThunk(
    'orders/getOrders',
    async(id = null, {rejectWithValue}) => {
        try {
            const querySnapshot = await getDocs(collection(db, "transactions"));
            // 用map遍历docs，生成包含id的订单数组并返回
            const orders = querySnapshot.docs.map((doc) => {
                const data = doc.data(); 
                return {...data, id: doc.id};
            });
            return orders;
        } catch (error) {
            // 捕获异步错误，传递错误信息
            return rejectWithValue(error.message);
        }
    }
)

2. 确保slice初始状态正确

检查你的orderSlice初始状态，确保orders初始化为空数组，避免组件首次渲染时orders为undefined：

const initialState = {
    orders: [],
    loading: false,
    error: null
};

3. 增强extraReducer的状态管理（可选）

可以添加加载、错误状态，方便组件处理不同场景：

extraReducers: (builder) => {
    builder
        .addCase(getOrders.pending, (state) => {
            state.loading = true;
            state.error = null;
        })
        .addCase(getOrders.fulfilled, (state, action) => {
            state.loading = false;
            state.orders = action.payload;
        })
        .addCase(getOrders.rejected, (state, action) => {
            state.loading = false;
            state.error = action.payload;
        });
}

4. 组件中优化数据渲染逻辑

可以根据加载、错误状态给出提示，提升体验：

const { orders, loading, error } = useSelector(selectAllOrders);

if (loading) return <div>加载中...</div>;
if (error) return <div>获取订单失败: {error}</div>;

return (
    <div>
        {orders.map(order => (
            <article key={order.id}>
                <p onClick={() => navigate(`/order/${order.id}`)}>
                    {order.currency}{order.toRecieveAmount}{order.resellerName}
                </p>
                <small>within the next 24 hours</small>
                <span>Transaction Status: {order.statusBuyer}</span>
            </article>
        ))}
    </div>
);

对应的选择器保持不变（需确保slice的name为orders）：

export const selectAllOrders = (state) => state.orders;

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