React Native MVC模式下TypeScript报props缺失错误如何解决

核心思路是拆分Props类型，明确区分「手动传入属性」和「控制器自动注入属性」，让TS能够识别两种属性的传入来源，具体调整步骤如下：

第一步：拆分类型定义 #

将视图组件的Props拆分为两个独立的类型段：

// 1. 定义控制器注入的固定属性类型
type AccountEditInjectedProps = {
  navigation: NavigationProp<YourRootStackParamList>; // 替换为项目实际的导航类型
  loading: boolean;
  onSubmit: (formValue: unknown) => Promise<void>; // 替换为实际的onSubmit方法类型
};

// 2. 定义需要手动传入的自定义属性类型
type AccountEditInfoOwnProps = {
  field: string;
  label: string;
};

// 3. 视图组件实际使用的Props = 注入属性 + 手动传入属性
export type AccountEditInfoProps = AccountEditInjectedProps & AccountEditInfoOwnProps;

视图组件AccountEditInfo直接使用AccountEditInfoProps作为入参类型即可，内部使用navigation/loading/onSubmit时仍然是必选值，无需添加可选链或非空断言。

第二步：调整控制器组件的类型约束 #

给AccountEditController的children添加类型限制，明确子组件只需要满足手动传入属性的类型要求即可：

import React, { ReactElement, useState } from 'react';
import { useNavigation } from '@react-navigation/native';

type AccountEditControllerProps = {
  children: ReactElement<AccountEditInfoOwnProps>;
};

export const AccountEditController = ({ children }: AccountEditControllerProps) => {
  // 原有逻辑：获取navigation、loading、onSubmit的实际值
  const navigation = useNavigation();
  const [loading, setLoading] = useState(false);
  const onSubmit = async (value) => {
    // 原有提交逻辑
  };

  // 注入属性
  return React.cloneElement(children, {
    navigation,
    loading,
    onSubmit,
  });
};

可选：通用控制器泛型封装 #

如果你的控制器需要复用于多个不同的视图组件，可以将类型改为泛型实现，不用绑定特定的视图属性：

type ControllerInjectedProps = {
  navigation: NavigationProp<YourRootStackParamList>;
  loading: boolean;
  onSubmit: (data: unknown) => Promise<void>;
};

type AccountEditControllerProps<T extends {}> = {
  children: ReactElement<T>;
};

export function AccountEditController<T extends {}>({ children }: AccountEditControllerProps<T>) {
  // 原有逻辑获取注入属性
  const injectedProps: ControllerInjectedProps = {
    navigation: useNavigation(),
    loading: false,
    onSubmit: async () => {},
  };

  return React.cloneElement(children, {
    ...children.props,
    ...injectedProps,
  } as T & ControllerInjectedProps);
}

调整完成后，页面组件AccountInfoEditScreen中仅传入field和label即可，TS不会再抛出缺失属性的报错。

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