React父子组件传参类型错误：缺失name属性的解决方法

问题场景 #

两个父组件ParentA和ParentB共用同一个子组件Child，但ParentB未传递name属性，触发TypeScript类型错误：

type '{ mail: any; }' is missing the following properties from type '{ mail: string; name: string; }: name`

初始代码示例：

const ParentA = () => {
  return (
    <>
      <Child 
        mail={project.mail}
        name={name}
      />
    </>
  )
}

const ParentB = () => {
  return (
    <>
      <Child 
        mail={project.mail}
      />
    </>
  )
}

const Child: FunctionComponent<{
  mail: string;
  name: string;
}> = ({ mail, name }) => {
  return <div>{name}</div>
}

尝试两种方案后遇到新问题：

1. 使用联合类型定义Props时，组件内部无法正确推断属性类型，导致JSX渲染报错
2. 将name设为可选属性后，渲染name时触发name is possibly 'undefined'错误

可行解决方案 #

方案一：给可选属性设置默认值 #

直接在组件的参数解构中给name设置默认值，TypeScript会自动识别其不会为undefined：

import { FunctionComponent } from 'react';

const Child: FunctionComponent<{
  mail: string;
  name?: string; // 保持与父组件传递的类型一致
}> = ({ mail, name = '' }) => { // 设置默认空字符串
  return (
    <div>
      {name} {/* 无类型错误 */}
    </div>
  )
}

方案二：渲染时做非空判断 #

如果不需要默认值，可通过空值合并运算符或条件渲染处理undefined情况：

import { FunctionComponent } from 'react';

const Child: FunctionComponent<{
  mail: string;
  name?: string;
}> = ({ mail, name }) => {
  return (
    <div>
      {/* 空值合并：name为undefined时显示空字符串 */}
      {name ?? ''}
      {/* 或者条件渲染，仅当name存在时显示 */}
      {name && <span>{name}</span>}
    </div>
  )
}

方案三：修复联合类型并添加类型守卫 #

若需严格区分「传递name」和「不传递name」两种场景，可修正联合类型定义，并在组件内部添加类型守卫：

import { FunctionComponent } from 'react';

// 定义两种明确的Props类型
interface ChildWithNameProps {
  mail: string;
  name: string;
}

interface ChildWithoutNameProps {
  mail: string;
  name?: never; // 明确不允许传递name（或传递undefined）
}

type ChildProps = ChildWithNameProps | ChildWithoutNameProps;

const Child: FunctionComponent<ChildProps> = (props) => {
  // 类型守卫：判断是否包含有效name属性
  if ('name' in props && props.name !== undefined) {
    return <div>名称：{props.name}</div>;
  }
  return <div>未设置名称</div>;
}

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