如何修正AuthContextProvider的TypeScript类型以消除报错？

你的错误根源在于错误定义了React Context的类型，把上下文要共享的数据类型和组件类型混在了一起，导致类型不匹配。

具体问题拆解 #

1. TAuthContext接口错误地同时继承了数据类型TAuthValue和组件签名(): JSX.Element，但React Context的值应该是你要共享的状态数据，不是组件本身。
2. 创建Context时，你把AuthContextProvider组件作为默认值传入，这不符合上下文值的类型要求，默认值应该是符合共享数据类型的对象。

修正后的完整代码 #

import React, { createContext, useEffect, useState } from 'react';
import { onAuthStateChanged, User } from 'firebase/auth';
import { auth } from '../firebase.config';

// 组件Props类型，保持不变
type Props = {
    children?: React.ReactNode;
};

// 这才是Context要共享的数值类型，不需要额外扩展组件签名
type AuthContextValue = {
    currentUser: User | null;
};

// 创建Context，默认值符合AuthContextValue类型
export const UserContext = createContext<AuthContextValue>({ currentUser: null });

export const AuthContextProvider = ({ children }: Props) => {
    const [currentUser, setCurrentUser] = useState<User | null>(null);

    useEffect(() => {
        const unsub = onAuthStateChanged(auth, (user) => {
            setCurrentUser(user);
        });

        return () => {
            unsub();
        };
    }, []);

    // 现在value的类型和Context定义的完全匹配
    return <UserContext.Provider value={{ currentUser }}>{children}</UserContext.Provider>;
};

关键修正点说明 #

• 移除了错误的TAuthContext接口，直接使用AuthContextValue作为Context的类型，它只包含你需要共享的currentUser状态。
• 创建UserContext时，传入的默认值是{ currentUser: null }，完全符合AuthContextValue的类型要求。
• 确保Provider的value属性是{ currentUser }，和Context的类型严格匹配。

这样修改后，TypeScript的类型错误就会消失，同时保持了类型安全，也符合React Context的工作流程：通过Provider共享currentUser状态，子组件可以通过useContext(UserContext)获取该状态。

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