如何为Next.js中支持任意Props的认证用高阶NextPage组件添加TypeScript类型

你遇到的问题是因为没有给withAuth的Component参数指定明确的TypeScript类型，导致TS报隐式any错误。要让这个HOC支持任意Props的Next.js页面组件，我们可以通过泛型来实现类型安全，同时还要修复一个容易忽略的问题：原组件的Props需要传递给包装后的组件，不然业务组件会丢失Props。

修正后的完整代码 #

import { NextPage } from 'next';
import { useAccount } from 'wagmi';
import { useAppSelector } from '../../hooks';
import EmptyState from '../EmptyState/EmptyState';

// 泛型HOC，P代表传入组件的Props类型
const withAuth = <P extends Record<string, unknown>>(Component: NextPage<P>): NextPage<P> => {
  const AuthenticatedComponent: NextPage<P> = (props) => {
    const currUser = useAppSelector(state => state.auth);
    const { isConnected } = useAccount();
    
    // 把接收到的Props传递给原组件，保证业务组件能拿到需要的参数
    return currUser.address && isConnected ? <Component {...props} /> : <EmptyState />;
  };

  return AuthenticatedComponent;
};

export default withAuth;

关键类型说明 #

1. 泛型<P extends Record<string, unknown>>：

   • P用来捕获传入组件的Props类型，extends Record<string, unknown>确保P是一个对象类型（符合React组件Props的结构）。
   • 这样不管你的页面组件需要什么Props（比如示例中的proposalTags: ProposalTag[]），TS都能自动推断并保留类型信息。

2. Component参数类型NextPage<P>：

   • 明确指定传入的参数是一个Next.js页面组件，并且带有P类型的Props，直接解决了隐式any的问题。

3. 返回值类型NextPage<P>：

   • 保证包装后的组件和原组件的Props类型完全一致，这样在使用withAuth(Proposal)时，TS依然能识别Proposal需要的proposalTags参数。

4. 传递Props：

   • 原来的代码中<Component />没有传递任何Props，会导致业务组件无法获取到getStaticProps/getServerSideProps返回的参数，所以必须加上{...props}把Props透传给原组件。

使用方式不变 #

你原来的调用代码不需要修改，TS会自动推断类型：

const Proposal: NextPage<{ proposalTags: ProposalTag[] }> = ({ proposalTags }) => {
  /** 业务代码 **/
}
export default withAuth(Proposal);

这样修改后，不仅解决了类型错误，还保证了组件Props的完整性和类型安全。

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