Cannot find name 'Props'

import { Firestore } from "@firebase/firestore";
import { onAuthStateChanged, User } from "firebase/auth";
import React, { PropsWithChildren, createContext, FC, useEffect, useMemo, useState } from "react";
import { Alert } from "react-native";
import { auth, db, login, logout, register } from "../firebase";

interface IContext {
    user: User | null
    isLoading: boolean
    register: (email: string, password: string) => Promise<void>
    login: (email: string, password: string) => Promise<void>
    logout: () => Promise<void> 
} 

export const AuthContext = createContext<IContext>({} as IContext)

export const AuthProvider: FC<PropsWithChildren<Props>> = ( { children } ) => {
    const [user, setUser] = useState<User | null>(null)
    const [isLoadingInitial, setIsLoadingInitial] = useState(true)
    const [isLoading, setIsLoading] = useState(false) 

    const registerHandler = async (email: string, password: string) => {
        setIsLoading(true)
        try {
            const {user} = await register(email, password)

            await addDoc(collection(db, 'users'), {
                _id: user.uid,
                displayName: 'No name',
            })
        } catch (error: any) {
            Alert.alert('Error registration', error)
        } finally {
            setIsLoading(false)
        }
    }

    const loginHandler = async (email: string, password: string) => {
        setIsLoading(true)
        try {
            await login(email, password)
        } catch (error: any) {
            Alert.alert('Error login', error)
        } finally {
            setIsLoading(false)
        }
    }

    const logoutHandler = async () => {
        setIsLoading(true)
        try {
            await logout()
        } catch (error: any) {
            Alert.alert('Error logout', error)
        } finally {
            setIsLoading(false)
        }
    }

    useEffect(() => onAuthStateChanged(auth, user => {
        setUser(user || null)
        setIsLoadingInitial(false)
    }), [])

    const value = useMemo(() => ({
        user, 
        isLoading, 
        login: loginHandler, 
        logout: logoutHandler, 
        register: registerHandler,
    }), [user, isLoading])

    return <AuthContext.Provider value={value}>
        {!isLoadingInitial && children }
    </AuthContext.Provider>
}

function addDoc(arg0: any, arg1: { _id: string; displayName: string; }) {
    throw new Error("Function not implemented.");
}

function collection(db: Firestore, arg1: string): any {
    throw new Error("Function not implemented.");
}

введите сюда описание изображения

Никак не могу понять в чем проблема, если убрать Props, то пишет, что children не существует и их невозможно вытащить.


Ответы (2 шт):

Автор решения: vbykovsky

ты передаешь в дженерик несуществующий тип Props, можно исправить так:

Заменить Props на пустой объект {}

export const AuthProvider: FC<PropsWithChildren<{}>> = ( { children } ) => {
→ Ссылка
Автор решения: Sergey

У вас не описан тип Props. Можно его описать, а не передавать пустой объект, как предложили в предыдущем ответе.

interface Props {
    text: '',
}

export const AuthProvider: FC<PropsWithChildren<Props>> = ( { children } ) => {
→ Ссылка