如何将带自定义属性的Next.js组件作为Children传递并访问属性

你遇到的类型报错和无法读取Auth属性的核心原因有两个：

1. 你给AuthProviderProps定义的children类型本身是错误的：AuthAppProps是App组件的入参类型，而children是React节点类型，二者完全不兼容，所以首先抛出类型不匹配错误。
2. 当你写<Component {...pageProps} />时，得到的是已经实例化的React Element对象，不是原来的组件定义本身。Auth是挂在组件构造函数上的静态属性，不会出现在实例化后的Element对象上，自然无法直接读取。

以下是两个可行的实现方案： #

方案一（推荐：类型安全、无黑魔法） #

调整AuthProvider的入参，不使用children传渲染后的元素，直接传入组件定义和props：
首先修正类型定义：

interface AuthProviderProps {
  Component: AuthAppProps['Component'];
  pageProps: Omit<AuthAppProps['pageProps'], 'session'>;
}

实现AuthProvider：

const AuthProvider: React.FC<AuthProviderProps> = ({ Component, pageProps }) => {
  if (Component.Auth) {
    return <AuthGuard><Component {...pageProps} /></AuthGuard>;
  }
  return <Component {...pageProps} />;
}

使用方式：

<SessionProvider session={session}>
  <AuthProvider Component={Component} pageProps={pageProps} />
</SessionProvider>

方案二（兼容children写法，类型安全度稍低） #

如果一定要保留children的写法，可以从React Element的type属性中获取原组件构造函数：
修正类型定义：

interface AuthProviderProps {
  children: React.ReactElement; // 限定仅接受单个React元素作为子节点
}

实现AuthProvider：

const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
  // 从元素中提取原组件构造函数，需手动断言类型
  const Component = children.type as AuthAppProps['Component'];
  if (Component.Auth) {
    return <AuthGuard>{children}</AuthGuard>;
  }
  return <>{children}</>;
}

使用方式和你预期的完全一致，但是需要注意：该方案要求AuthProvider的子节点必须是单个带Auth静态属性的自定义组件渲染出的元素，不能传入文本、多个节点、原生HTML标签元素，否则会出现运行时错误。

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