React组件类型不匹配报错：ReactElement缺失SugarProductSchema属性

错误的核心原因是你把ProductCard组件的返回类型错误指定为了SugarProductSchema，但React组件的返回值必须是React元素（如JSX.Element），而不是你定义的产品数据类型。SugarProductSchema应该用来约束组件的props，而非返回值。

修复步骤： #

修改ProductCard组件的类型定义，将SugarProductSchema作为props的类型，同时修正返回类型为React组件的合法返回值类型：

方法1：使用React.FC（函数组件类型）

import {
  Box,
  Center,
  useColorModeValue,
  Heading,
  Text,
  Stack,
  Image,
  Icon,
  HStack,
  Tooltip,
  Flex,
} from '@chakra-ui/react';
import { FiShoppingBag } from 'react-icons/fi';
import { SugarProductSchema } from '@/types/sugar-product-schema';
import React from 'react';

// 使用React.FC将SugarProductSchema作为props类型
export const ProductCard: React.FC<SugarProductSchema> = ({
  title,
  brand,
  price,
  coverImage,
}) => {
  return (
    <Center py={12}>
      {/* 原组件JSX内容保持不变 */}
      <Box
        role={'group'}
        p={6}
        maxW={'330px'}
        w={'full'}
        bg={useColorModeValue('white', 'gray.800')}
        boxShadow={'2xl'}
        rounded={'lg'}
        pos={'relative'}
        zIndex={1}
      >
        <Box
          rounded={'lg'}
          mt={-12}
          pos={'relative'}
          height={'230px'}
          _after={{
            transition: 'all .3s ease',
            content: '&quot;&quot;',
            w: 'full',
            h: 'full',
            pos: 'absolute',
            top: 5,
            left: 0,
            backgroundImage: `url(${coverImage})`,
            filter: 'blur(15px)',
            zIndex: -1,
          }}
          _groupHover={{
            _after: {
              filter: 'blur(20px)',
            },
          }}
        >
          <Image
            rounded={'lg'}
            height={230}
            width={282}
            objectFit={'cover'}
            src={coverImage}
          />
        </Box>
        <Stack pt={10} align={'center'}>
          <Text color={'gray.500'} fontSize={'sm'} textTransform={'uppercase'}>
            {brand}
          </Text>
          <Heading fontSize={'2xl'} fontFamily={'body'} fontWeight={500}>
            {title}
          </Heading>
          <HStack>
            <Text fontWeight={800} fontSize={'xl'}>
              {price}PLN
            </Text>
            <Tooltip
              label='Dodaj do koszyka'
              fontSize='md'
              bg='gray.50'
              hasArrow
            >
              <Flex as='span' textAlign='center'>
                <Icon as={FiShoppingBag} w={6} h={6} cursor='pointer' />
              </Flex>
            </Tooltip>
          </HStack>
        </Stack>
      </Box>
    </Center>
  );
};

export default ProductCard;

方法2：手动标注props和返回类型

如果你不想用React.FC，可以直接给props指定类型，并明确返回类型为JSX.Element：

import {
  Box,
  Center,
  useColorModeValue,
  Heading,
  Text,
  Stack,
  Image,
  Icon,
  HStack,
  Tooltip,
  Flex,
} from '@chakra-ui/react';
import { FiShoppingBag } from 'react-icons/fi';
import { SugarProductSchema } from '@/types/sugar-product-schema';

// props类型为SugarProductSchema，返回类型为JSX.Element
export const ProductCard = ({
  title,
  brand,
  price,
  coverImage,
}: SugarProductSchema): JSX.Element => {
  return (
    <Center py={12}>
      {/* 原组件JSX内容保持不变 */}
      <Box
        role={'group'}
        p={6}
        maxW={'330px'}
        w={'full'}
        bg={useColorModeValue('white', 'gray.800')}
        boxShadow={'2xl'}
        rounded={'lg'}
        pos={'relative'}
        zIndex={1}
      >
        <Box
          rounded={'lg'}
          mt={-12}
          pos={'relative'}
          height={'230px'}
          _after={{
            transition: 'all .3s ease',
            content: '&quot;&quot;',
            w: 'full',
            h: 'full',
            pos: 'absolute',
            top: 5,
            left: 0,
            backgroundImage: `url(${coverImage})`,
            filter: 'blur(15px)',
            zIndex: -1,
          }}
          _groupHover={{
            _after: {
              filter: 'blur(20px)',
            },
          }}
        >
          <Image
            rounded={'lg'}
            height={230}
            width={282}
            objectFit={'cover'}
            src={coverImage}
          />
        </Box>
        <Stack pt={10} align={'center'}>
          <Text color={'gray.500'} fontSize={'sm'} textTransform={'uppercase'}>
            {brand}
          </Text>
          <Heading fontSize={'2xl'} fontFamily={'body'} fontWeight={500}>
            {title}
          </Heading>
          <HStack>
            <Text fontWeight={800} fontSize={'xl'}>
              {price}PLN
            </Text>
            <Tooltip
              label='Dodaj do koszyka'
              fontSize='md'
              bg='gray.50'
              hasArrow
            >
              <Flex as='span' textAlign='center'>
                <Icon as={FiShoppingBag} w={6} h={6} cursor='pointer' />
              </Flex>
            </Tooltip>
          </HStack>
        </Stack>
      </Box>
    </Center>
  );
};

export default ProductCard;

验证其他部分 #

你通过graphql-request获取数据并传递props的写法是正确的：

<ProductCard
  title={product.title}
  brand={product.brand}
  price={product.price}
  coverImage={product.coverImage.url}
/>

这里coverImage传递的是字符串类型的url，完全符合SugarProductSchema中coverImage: string的定义，无需修改。

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