Props校验是防止组件崩溃的第一道防线，Vue和React均支持类型、必填、默认值等约束，可提前拦截undefined错误；推荐结合TypeScript实现编译期与运行时双重防护。
Props 校验不是锦上添花，而是防止组件因错误传参崩溃的第一道防线。Vue 和 React 都原生支持（或通过插件）对传入的 props 做类型、必填、默认值等约束，一旦不满足就给出清晰警告，而不是等到渲染时报错或显示异常内容。
明确声明 props 类型和必填项
不写校验时，props 是“来者不拒”的任意值，容易在组件内部调用 .map() 或访问 .length 时抛出 TypeError: Cannot read property 'xxx' of undefined。显式声明能提前拦截问题。
React 中使用 PropTypes（函数组件）或 static propTypes = {}（类组件）：
import PropTypes from 'prop-types';
function UserList({ users, onRemove }) {
return (
<div>
{users.map(u => (
<div key={u.id}>{u.name}</div>
))}
</div>
);
}
UserList.propTypes = {
users: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.number.isRequired,
name: PropTypes.string.isRequired
})
).isRequired,
onRemove: PropTypes.func
};
Vue 3 的 defineProps 支持运行时校验（配合 TypeScript 更佳），例如：
const props = defineProps({
title: {
type: String,
required: true
},
count: {
type: Number,
default: 0,
validator: (val) => val >= 0
}
});
为可选 props 提供合理默认值
避免在模板或逻辑中反复写 props.xxx || 'default' 或 ?. 可选链。把兜底逻辑收束到 props 声明层，既干净又统一。
- React 中用
defaultProps或解构赋默认值（注意：函数组件中推荐后者，defaultProps对解构无效） - Vue 中直接在
defineProps里写default字段，对象/数组需用工厂函数返回：default: () => [] - 默认值应是语义安全的——比如列表默认为空数组而非
null，避免后续.map报错
用自定义校验器捕获业务逻辑错误
基础类型校验只能管“是不是字符串”，但业务常需要“是不是有效邮箱”“是不是正整数”“是否在允许范围内”。这时可用 validator 函数（Vue）或自定义 PropTypes（React）。
例如 Vue 中限制状态字段只能是预设枚举值：
status: {
type: String,
validator: (val) => ['draft', 'published', 'archived'].includes(val)
}
React 中可封装：
const statusPropType = PropTypes.oneOf(['draft', 'published', 'archived']);
// 或更灵活的自定义检查：
const emailPropType = (props, propName, componentName) => {
const value = props[propName];
if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
return new Error(`Invalid email in ${componentName}`);
}
};
配合 TypeScript 实现编译期 + 运行时双重防护
纯运行时校验（如 PropTypes）只在开发环境生效，上线后失效；而 TypeScript 在编码阶段就能提示错误，还能生成更准确的类型定义供 IDE 和团队协作使用。
- React 推荐用
interface定义 props，配合 TSX 文件自动校验 - Vue 3 脚手架默认启用 TS，
defineProps<{ title: string; count?: number }>()即可获得完整类型推导 - 两者结合效果最佳：TS 拦住大部分错误，运行时校验兜底处理动态数据（如 API 返回未严格校验的字段）
