React TypeScript下高阶组件(HOC)类型注解问题求助

我来帮你搞定这个HOC的类型标注问题，核心是要理清HOC的输入输出组件类型，以及注入props和原组件props的关系。先看看你代码里的几个关键问题：用了Any（TypeScript里应该是小写any，但更重要的是要明确类型）、没有定义内部组件的props类型、HOC的返回类型不清晰，这些都会导致TypeScript报错。

第一步：先定义依赖的基础类型 #

首先得把HOC用到的相关类型明确下来，比如Firebase实例、认证用户、上下文的类型，这些是类型注解的基础：

// 根据你的Firebase实例实际情况定义类型
type FirebaseType = {
  auth: () => {
    currentUser: { uid: string; email?: string } | null;
    // 加上你需要的其他auth方法/属性
  };
};

// 认证用户的类型，和Firebase返回的currentUser匹配
type AuthenticatedUser = NonNullable<ReturnType<FirebaseType["auth"]>["currentUser"]>;

// 初始化AuthUserContext，明确上下文值的类型
const AuthUserContext = React.createContext<AuthenticatedUser | null>(null);

第二步：修正HOC的类型注解 #

接下来调整withAuthentication的类型，重点是明确泛型Props、内部组件的props，以及HOC的返回类型：

// 假设你的withFirebase是一个注入firebase props的HOC，它的类型大概是这样（如果还没定义的话）
const withFirebase = <P extends object>(
  Component: React.ComponentType<P & { firebase: FirebaseType }>
): React.ComponentType<P> => {
  // 内部实现：比如从Context获取firebase实例，传递给组件
  return (props: P) => {
    const firebase = /* 这里是你获取firebase实例的逻辑，比如useContext(FirebaseContext) */;
    return <Component {...props} firebase={firebase} />;
  };
};

// 现在修正withAuthentication的类型
const withAuthentication = <Props extends object>(
  Component: React.ComponentType<Props>
): React.ComponentType<Props> => {
  // 内部组件需要接收原组件的Props，加上withFirebase注入的firebase
  const WithAuthentication = (props: Props & { firebase: FirebaseType }) => {
    // 获取认证用户，类型会自动匹配
    const authenticated = props.firebase.auth().currentUser;

    return (
      <AuthUserContext.Provider value={authenticated}>
        {/* 这里不需要类型断言，因为props包含Props的所有属性 */}
        <Component {...props} />
      </AuthUserContext.Provider>
    );
  };

  // withFirebase会把需要firebase的组件转换成只需要原Props的组件
  return withFirebase(WithAuthentication);
};

关键说明 #

1. 泛型Props：<Props extends object>代表原组件需要的props类型，确保HOC可以复用在不同props的组件上。
2. 内部组件的props：Props & { firebase: FirebaseType }表示这个内部组件不仅需要原组件的props，还需要firebase（由withFirebase注入）。
3. HOC返回类型：React.ComponentType<Props>表示最终返回的组件只需要原组件的props，firebase由withFirebase自动注入，不需要调用者传递。
4. 去掉类型断言：原代码里的props as Props可以去掉，因为我们已经明确props包含Props的所有属性，TypeScript会自动识别。

额外注意点 #

如果authenticated是异步获取的（比如监听auth状态变化），你需要用useState和useEffect来处理，类型也要保持一致：

const WithAuthentication = (props: Props & { firebase: FirebaseType }) => {
  const [authenticated, setAuthenticated] = React.useState<AuthenticatedUser | null>(null);

  React.useEffect(() => {
    const unsubscribe = props.firebase.auth().onAuthStateChanged(user => {
      setAuthenticated(user);
    });
    return unsubscribe;
  }, [props.firebase]);

  return (
    <AuthUserContext.Provider value={authenticated}>
      <Component {...props} />
    </AuthUserContext.Provider>
  );
};

这样调整后，TypeScript就不会再报错了，而且能提供完整的类型检查。

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