DialogContent支持多子元素却报‘children需单个子元素’错误排查

DialogContent支持多个子元素。

以下代码会触发报错：

<DialogContent dividers>
  {loading && <Stack alignItems='center'>
    <CircularProgress />
  </Stack>}

  {error && <AlertErrorFallback error={error as any} />}

  {undefined !== customer &&
    <ErrorBoundary FallbackComponent={AlertErrorFallback}>
      <CustomerDetailsList customer={customer} />
    </ErrorBoundary>
  }
</DialogContent>

移除{error && ...}这段代码后，问题就消失了，我完全搞不懂原因。这些状态值来自自定义钩子：

const { get, loading, error, data: customer } = useCustomer();

• loading：根据异步请求状态，取值为true或false
• error：取值为null或Error实例（请求出现错误时存在）
• data：取值为undefined或对象

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