I am in the process of developing an application using Next.js with TypeScript. I have encountered an error message stating
Type 'VoidFunctionComponent<ShirtDetailProps>' is missing the following propertiesIt is important to note that the object's type changes based on its category. The field details should be of type Details, while the subfield category_details within Details could either be of type Shirt or Bag, depending on the value of category_name.
{
"data": {
"id": 1,
"details": [
{
"id": 1,
"category_name": "shirt",
"category_detail": {
"id": 1,
"size": "small",
"color": "white"
}
},
{
"id": 2,
"category_name": "bag",
"category_detail": {
"id": 13,
"width": 30,
"height": 15
}
},
{
"id": 3,
"category_name": "shirt",
"category_detail": {
"id": 45,
"size": "large",
"color": "pink"
}
}
]
}
}
export interface Box {
id: number;
details: Details[];
}
export interface Details {
id: number;
category_name: string;
category_detail: CategoryDetail[];
}
export interface Shirt {
id: number;
size: string;
color: string;
}
export interface Bag {
id: number;
width: number;
height: number;
}
export type CategoryDetail = Shirt | Bag;
The error occurs in the following section:
const Foo: NextPage = () => {
const { box } = useFetchBox();
return (
<div>
{box.details.map((detail) => (
{detail.category_name === "shirt" && <ShirtDetail categroy_detail={detail.category_detail as unknown as typeof Shirt} />} // error: Type 'VoidFunctionComponent<ShirtDetailProps>' is missing the following properties from type 'ShirtDetail': id, size, color
{detail.category_name === "bag" && <BagDetail categroy_detail={detail.category_detail as unknown as typeof Bag} />} // error: Type 'VoidFunctionComponent<BagDetailProps>' is missing the following properties from type 'BagDetail': id, width, height
))}
</div>
)
}
ShirtDetail is structured as follows:
interface ShirtDetailProps {
category_detail: Shirt;
}
const ShirtDetail: React.VFC<ShirtDetailProps> = ({
category_detail,
}) => {
return (
// some code
);
};
export default ShirtDetail;
Prior to encountering this error, I attempted several steps:
resulted incategroy_detail={detail.category_detail as Shirt}'Shirt' refers to a value, but is being used as a type here. Did you mean 'typeof Shirt'?- Adjusted it to
as recommended, which promptedcategory_detail={detail.category_detail as typeof Shirt}Conversion of type 'CategoryDetail[]' to type 'VFC<ShirtDetailProps>' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. - Modified it to
as suggested, resulting incategory_detail={detail.category_detail as unknown as typeof Shirt}Type 'VoidFunctionComponent<ShirtDetailProps>' is missing the following properties from type 'Shirt': id, size, color - I am unsure how to proceed to resolve this issue.
Any assistance would be greatly appreciated.