我在构建过程(Vercel)中遇到了一个错误,product
被传递到CartItem.tsx
中,尽管它是在types.tsx
中声明的。
错误:
Type error: Property 'imageUrl' does not exist on type 'Product'.
43 | <div className="flex items-center">
44 | <Image
> 45 | src={product.imageUrl}
| ^
46 | alt={product.itemName}
47 | width={100}
48 | height={100}
字符串
CartItem.tsx:
import { Product } from "types/types";
import Image from "next/image";
export default function CartItem({ product }: { product: Product }) {
/* ... */
return (
<div className="flex items-center">
<Image
src={product.imageUrl}
alt={product.itemName}
width={100}
height={100}
className="h-10 w-10 rounded-full mr-4 object-cover"
/>
{* ... *}
</div>
);
}
型
types.tsx:
/* ... */
export type Product = {
id: number;
restaurantId: number;
itemName: string;
restaurantName: string;
imageUrl: string;
// title: string;
description: string;
price: number;
// discountPercentage: number;
// rating: number;
// stock: number;
// brand: string;
// category: string;
// thumbnail: string;
// images: string[];
quantity?: number;
};
型
1条答案
按热度按时间wlp8pajw1#
根据你写的代码,它应该可以工作。我会尝试暂时将您的类型定义移动到与
CartItem
相同的文件中,看看是否解决了问题-如果解决了,那么您的类型导入方式一定有问题。还有一个侧记:你可以使用React.FC类型来更干净地类型化组件。
字符串
TSPlayground