React Router Dom：useParams解构id为undefined的购物车问题

问题场景 #

学习开发电商网站时，将商品添加到购物车页面后，出现商品id为undefined的问题，商品数据取自MongoDB数据库，服务器终端抛出ObjectId格式错误。

核心错误点 #

1. 路由参数传递缺失：CartPage的路由未定义:id参数，但组件中尝试用useParams()获取id，必然返回undefined；同时添加购物车按钮跳转时未携带商品ID参数，导致进入购物车页面时无有效ID。
2. 购物车逻辑顺序错误：点击按钮时先执行navigate('/cart')跳转页面，再调用addToCart，可能导致添加逻辑未执行就跳转；且购物车状态设计为单个商品，不符合多商品存储需求。
3. 服务器端ID解析失败：客户端传递undefined作为商品ID，MongoDB无法将其转换为合法的ObjectId，触发类型错误。

代码修复方案 #

1. 引入购物车状态管理（React Context） #

创建全局购物车上下文，统一管理购物车商品ID列表：

// src/contexts/CartContext.js
import { createContext, useContext, useState } from 'react';

const CartContext = createContext();

export const CartProvider = ({ children }) => {
  const [cartItemIds, setCartItemIds] = useState([]);

  const addToCart = (productId) => {
    setCartItemIds(prev => {
      // 避免重复添加同一商品
      if (!prev.includes(productId)) {
        return [...prev, productId];
      }
      return prev;
    });
  };

  return (
    <CartContext.Provider value={{ cartItemIds, addToCart }}>
      {children}
    </CartContext.Provider>
  );
};

export const useCart = () => useContext(CartContext);

在根组件中包裹上下文：

// src/App.js
import { CartProvider } from './contexts/CartContext';
import PageRoutes from './routes/PageRoutes';

function App() {
  return (
    <CartProvider>
      <PageRoutes />
    </CartProvider>
  );
}

export default App;

2. 修改添加购物车按钮逻辑 #

先执行添加商品操作，再跳转页面，通过上下文传递ID：

// ProductInformation组件
import { useCart } from '../contexts/CartContext';

// 组件内部逻辑
const { addToCart } = useCart();

// 按钮部分
<CustomButton
  onClick={() => {
    addToCart(id);
    navigate('/cart');
    console.log(`add to cart ${id}`);
  }}
>
  Add to cart
</CustomButton>

3. 重构CartPage组件 #

从上下文获取购物车商品ID列表，批量获取商品数据：

// CartPage组件
import * as React from 'react';
import { Container } from '@mui/material';
import ProductService from '../../services/product-service';
import { useCart } from '../../contexts/CartContext';

const CartPage = () => {
const { cartItemIds } = useCart();
const [productsInCart, setProductsInCart] = React.useState([]);

React.useEffect(() => {
  const fetchCartProducts = async () => {
    if (cartItemIds.length === 0) {
      setProductsInCart([]);
      return;
    }
    // 批量获取购物车中的所有商品
    const products = await Promise.all(
      cartItemIds.map(id => ProductService.fetchProductById(id))
    );
    setProductsInCart(products);
  };

  fetchCartProducts();
}, [cartItemIds]);

return (
  <Container>
    {productsInCart.length === 0 ? (
      <p>购物车为空</p>
    ) : (
      <pre>
        {JSON.stringify(productsInCart, null, 4)}
      </pre>
    )}
  </Container>
 );
};

export default CartPage;

4. 路由无需修改（保持原有结构） #

const PageRoutes = () => (
  <Routes>
     <Route path="/" element={<MainLayout />}>
     <Route index element={<HomePage />} />
     <Route path="/about-us" element={<AboutUs />} />
     <Route path="/product-catalog" element={<ProductCatalog />} />
     <Route path="/order" element={<OrderPage />} />
     <Route path="/product/:id" element={<ProductInformation />} />

     <Route path="auth/" element={<AuthLayout />}>
       <Route path="login" element={<LoginPage />} />
       <Route path="register" element={<RegisterPage />} />
     </Route>

     <Route path="/cart" element={<CartPage />} />
   </Route>
 </Routes>
);

修复说明 #

• 用全局上下文管理购物车数据，避免依赖路由参数传递单个商品ID，支持多商品存储需求。
• 调整添加购物车的逻辑顺序，确保商品ID先被存入购物车，再跳转页面。
• 批量获取商品数据，提升请求效率，同时避免传递undefined导致服务器端ObjectId解析错误。

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