在NextJS 13.0.6中使用TypeScript和Firebase时，AuthContext中出现未发现的类型错误

我想显示一个页面，如果用户存在。目前整个应用程序是空的，只有AuthContext和这一个页面。我有这个工作在React，但它有一些问题，因为我把它移植到TS和Next 13-我是新的，所以真的很感谢任何支持：

身份验证上下文.tsx：

'use client';
import { useContext, createContext, useEffect, useState } from 'react';
import {
  GoogleAuthProvider,
  signInWithPopup,
  signInWithRedirect,
  signOut,
  onAuthStateChanged,
  signInWithEmailAndPassword,
  User,
} from 'firebase/auth';
import { auth } from '../../../firebaseConfig';
import getUserData from '../api/getUserData';

//-----------------------interfaces-----------------------------------------

interface Props {
  children: React.ReactNode;
}

interface SignInCredentials {
  email: string;
  password: string;
}

export interface AuthContextValues {
  googleSignIn: () => void;
  emailSignIn: ({ email, password }: SignInCredentials) => void;
  logout: () => void;
  user: User | null;
  userProfileData: any;
  loadingUser: boolean;
}

//-----------------AuthContextProvider--------------------------------------
const emailSignIn = ({ email, password }: SignInCredentials) => {
  try {
    signInWithEmailAndPassword(auth, email, password);
  } catch (e) {
    console.error(e);
  }
};
const googleSignIn = () => {
  const provider = new GoogleAuthProvider();
  signInWithRedirect(auth, provider);
};

const initialState: AuthContextValues = {
  user: null,
  googleSignIn,
  emailSignIn,
  logout: function (): void {
    throw new Error('Function not implemented.');
  },
  userProfileData: undefined,
  loadingUser: false,
};

const AuthContext = createContext<AuthContextValues>(initialState);

export const AuthContextProvider = ({ children }: Props) => {
  const [user, setUser] = useState<User | null>(null);
  const [userProfileData, setUserProfileData] = useState(null); 
  const [loadingUser, setLoadingUser] = useState<boolean>(true);

  const logout = async () => {
    await signOut(auth);
    setUser(null);
    setUserProfileData(null);
  };

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, async (currentUser) => {
      try {
        if (currentUser) {
          setUser(currentUser);
          await getUserData(currentUser, setUserProfileData);
        } else {
          setUser(null);
          console.log('no user detected in onAuthStateChanged');
        }
      } catch (e) {
        console.error(e);
        // toast.error('There was a problem signing in. Please try again.')
      } finally {
        setLoadingUser(false);
      }
    });
    return () => {
      unsubscribe();
    };
  }, []);

  console.log(user);
  console.log(userProfileData);

  return (
    <AuthContext.Provider
      value={{
        googleSignIn,
        emailSignIn,
        logout,
        user,
        userProfileData,
        loadingUser,
      }}
    >
      {children}
    </AuthContext.Provider>
  );
};

export const useUserAuth = () => {
  return useContext(AuthContext);
};

页码.tsx：

import React from 'react';
import { useUserAuth } from './../../components/shared/context/AuthContext';

type Props = {};

export default function UserPage(props: Props) {
  const { user } = useUserAuth();
  return <>{user?.uid}</>;
}

主布局.tsx

import './global.css';
import { AuthContextProvider } from './../components/shared/context/AuthContext';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang='en'>
      <body>
        <AuthContextProvider>{children}</AuthContextProvider>
      </body>
    </html>
  );
}

这是我得到的错误：

client.js?234c:691 Uncaught TypeError: (0 , _components_shared_context_AuthContext__WEBPACK_IMPORTED_MODULE_2__.useUserAuth) is not a function
    at UserPage (webpack-internal:///(sc_server)/./app/user/page.tsx:13:106)
    at attemptResolveElement (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1207:42)
    at resolveModelToJSON (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1660:53)
    at Array.toJSON (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1121:40)
    at stringify (<anonymous>)
    at processModelChunk (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:172:36)
    at retryTask (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1868:50)
    at performWork (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1906:33)
    at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1297:40)
    at scheduleWork (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:52:25)
    at pingTask (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1296:29)
    at ping (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1309:40)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
resolveErrorDev @   client.js?234c:691
processFullRow  @   client.js?234c:756
processBinaryChunk  @   client.js?234c:789
progress    @   client.js?234c:842

我尝试重命名useUserAuth，但未影响结果。
整个代码，除了TS，在React 18中工作。

在NextJS 13.0.6中使用TypeScript和Firebase时，AuthContext中出现未发现的类型错误

1条答案

相关问题

热门标签

最新问答