React组件传参报错：类型不匹配与React子元素无效问题排查

错误原因 #

你的组件定义犯了React基础规范错误：React函数组件的props是作为单个对象传入的，而非独立参数。

• 当前组件定义StepperTitle = (title_part_1: string, title_part_2: string)会导致：
  1. 第一个参数title_part_1实际接收的是完整的props对象（即父组件传入的{ title_part_1: string; title_part_2: string }），而非预期的字符串，直接触发父组件的类型不匹配错误：Type '{ title_part_1: string; title_part_2: string; }' is not assignable to type 'string'。
  2. 组件内部渲染{title_part_1}时，实际是尝试渲染一个对象，因此抛出Objects are not valid as a React child的渲染错误。

解决方案 #

修改组件定义，通过对象解构从props对象中提取所需属性，并添加类型接口明确props类型：

import { Center, VStack, Text, Box } from '@chakra-ui/react';
import React from 'react';

// 定义props类型接口，明确属性类型
interface StepperTitleProps {
  title_part_1: string;
  title_part_2: string;
}

// 使用对象解构接收props，并指定类型
const StepperTitle = ({ title_part_1, title_part_2 }: StepperTitleProps) => {
    return (
        <>
            <Box>
                <VStack>
                    <Text
                        fontWeight='700'
                        fontSize={['18px', '23px', '23px', '25px', '28px']}
                        lineHeight='34px'
                        color='#434E61'
                    >
                        {title_part_1}
                    </Text>

                    <Center>
                        <Text
                            fontWeight='700'
                            fontSize={['18px', '23px', '23px', '25px', '28px']}
                            lineHeight='34px'
                            color='#434E61'
                        >
                            {title_part_2}
                        </Text>
                    </Center>
                </VStack>
            </Box>
        </>
    )
}

export default StepperTitle;

修改说明 #

1. 新增StepperTitleProps接口：规范props类型，提升代码可维护性和类型检查能力。
2. 对象解构接收props：符合React组件的props传递规范，正确提取title_part_1和title_part_2两个字符串属性。

修改完成后，父组件中<StepperTitle title_part_1=' Tell us what you’re' title_part_2='interested in' />的调用代码无需改动，即可正常运行，两个错误都会被解决。

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