Next.js TypeScript组件传参失败：MyOrders无法向MyOrderItem传值

你的代码存在两个核心问题导致无法传值：

• 属性名称不匹配：MyOrders组件传递的是order属性，但MyOrderItem的Props接口定义的是product，TypeScript会因属性不匹配抛出类型错误。
• 未接收传入的Props：MyOrderItem组件没有声明接收props参数，无法访问父组件传递的数据。

修复方案（二选一即可） #

方案1：统一使用order作为属性名 #

修改MyOrderItem组件的Props接口并接收props：

import { MyOrderItemsData } from '@/types/MyOrderItemsData';
import { Box } from '@mui/material';
import { FC } from 'react';

// 修正Props接口的属性名称为order
interface Props {
  order: MyOrderItemsData;
  index?: number;
}

// 接收props参数并使用
const MyOrderItem: FC<Props> = ({ order, index }) => {
  return (
    <Box>
      <h1>{order.productName}</h1>
      <p>订单ID: {order.orderId}</p>
      <p>价格: {order.price}</p>
    </Box>
  );
};

export default MyOrderItem;

MyOrders组件的代码无需修改，保持原有的order={order}传递即可。

方案2：统一使用product作为属性名 #

修改MyOrders组件中传递的属性名，同时在MyOrderItem中接收props：

MyOrders组件修改部分：

{orders.map((order, index) => (
  <MyOrderItem
    key={order.orderId} 
    index={index} 
    product={order} // 将order改为product
  />
))}

MyOrderItem组件修改部分：

import { MyOrderItemsData } from '@/types/MyOrderItemsData';
import { Box } from '@mui/material';
import { FC } from 'react';

interface Props {
  product: MyOrderItemsData;
  index?: number;
}

// 接收product属性并使用
const MyOrderItem: FC<Props> = ({ product }) => {
  return (
    <Box>
      <h1>{product.productName}</h1>
      <p>卖家: {product.sallerName}</p>
      <p>预计送达: {product.deliveryTime}</p>
    </Box>
  );
};

export default MyOrderItem;

内容的提问来源于stack exchange，提问作者Muhammad Mehedi Hasan