如何解决ESLint抛出的Must use destructuring props assignment报错

安全阿岳

2026-10-2

这个报错是ESLint的react/destructuring-assignment规则触发的，要求所有props属性的访问必须使用解构赋值写法，不允许直接通过props.xxx的链式调用读取属性，你传入props的逻辑是正常的，只需要调整组件内读取props的写法即可。

方案1：组件参数直接解构（最推荐）

直接在函数参数位置完成props的解构，写法最简洁：

// 基础写法，解构出user属性
export default function Cadastro({ user }) {
  const Email = user.email;
  console.log(Email);
  const email = Email;
  // 剩余组件逻辑
}

// 也可以直接嵌套解构出email，进一步简化代码
// 注意如果user可能为空，需要加默认值避免解构报错
export default function Cadastro({ user: { email = '' } = {} }) {
  console.log(email);
  // 剩余组件逻辑
}

方案2：组件内部统一解构props

如果不想修改函数参数的写法，可以在组件开头先完成props的解构，同样符合规则要求：

export default function Cadastro(props) {
  const { user } = props;
  const Email = user.email;

  console.log(Email);

  const email = Email;
  // 剩余组件逻辑
}