这个问题是由于在 AvatarGroup 中，额外的头像计算是基于子对象的数量( children.length )。在应用 null 条件之前，您的自定义 AvatarChecker 组件被视为有效的子对象。我不确定我们是否应该正式支持 AvatarGroup 内的自定义组件。我认为这更多地是一种增强，而不是一个错误。我会保持这个问题开放，尽管我不确定它是否可行。

@paoloLigsay
正如@ZeeshanTamboli所提到的，他认为这是一个增强功能而不是一个错误。
与此同时，您可以使用以下代码来实现您的需求：
将以下代码放在组件上方
const notThese = ["W", "E", "H", "N"];

<AvatarGroup max={2}>
  {avatars
    .filter((f) => {
      if (notThese.includes(f.name)) {
        return false;
      }
      return true;
    })
    .map((avatar) => (
      <Avatar sx={{ bgcolor: "primary.main" }}>{avatar.name}</Avatar>
    ))}
</AvatarGroup>

让我们看看接下来会发生什么。

Hi @ZeeshanTamboli@PunitSoniME ,我同意将此视为增强功能，因为在没有自定义组件的情况下也能完美运行。感谢您的输入！