移至src目录后Context Hook中signin函数未执行问题求助

我尝试用Context Hook实现signin方法，但该方法在AuthContext文件内完全没执行。从首页调用时，signin里的console.log和setUser都没运行，怎么解决？

相关代码文件 #

_app.tsx #

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import {AuthProvider} from '../contexts/AuthContext'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <AuthProvider>
      <Component {...pageProps} />
    </AuthProvider>
  )
}

AuthContext.tsx #

import { createContext, useState } from "react";

type AuthContextType = {
  user: FirebaseUserAuth | null;
  signin: (email: string, password: string) => void
}

const initialValue: AuthContextType= {
  user: null,
  signin: (email: string, password: string) => {}
}

export const AuthContext = createContext(initialValue);

export const AuthProvider = ({children}: PropsWithChildren) => {

  const [user, setUser] = useState<FirebaseUserAuth | null>(initialValue.user)

  const signin = (email: string, password: string) => {
    console.log("SIGNIN FROM AUTHCONTEXT")
    setUser({
      uid: "a",
      email: "b",
      name: "c"
    })
    
  }

  return (
    <AuthContext.Provider 
      value={{
        user,
        signin
      }}
    >
      {children}
    </AuthContext.Provider>
  )
}

index.tsx #

import { NextPage } from 'next'
import { FormEvent, useContext } from 'react'
import { AuthContext } from '../contexts/AuthContext'

const Home: NextPage = () => {

  const { user, signin } = useContext(AuthContext)

  function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault()
    const email = e.currentTarget.email.value
    const password = e.currentTarget.password.value
    console.log(email, password)
    signin(email, password)
    
  }
  
  return (
    <>
      <h1>User: {user?.name}</h1>
      <form onSubmit={handleSubmit}>
        <input type="text" name='email' id='email'/>
        <input type="text" name='password' id='password'/>
        <button type='submit'>SignIn</button>
      </form>
      
    </>
  )
}
export default Home

补充信息 #

文件夹结构如下，且仅当将context、pages、styles文件夹移至src目录时才会出现此问题：

Project
-- .next
-- node_modules
-- public
-- src
  |-- context
  |-- pages
  |-- styles

解决方法 #

这个问题核心是导入路径不匹配，文件移到src目录后，你代码里的导入路径和实际文件夹结构不一致，导致调用的是初始值里的空signin函数，而非AuthProvider中定义的方法。

1. 修正所有文件的导入路径 #

你的文件夹结构里是src/context，但代码里导入的是../contexts/AuthContext（多了个s），这是关键错误。

• _app.tsx修正导入：

  import {AuthProvider} from '../context/AuthContext'
  

• index.tsx修正导入：

  import { AuthContext } from '../context/AuthContext'
  

2. 补充缺失的类型定义 #

AuthContext代码里用了PropsWithChildren和FirebaseUserAuth但未导入/定义，会导致TS报错，间接影响代码运行：

// 在AuthContext.tsx顶部补充
import { createContext, useState, PropsWithChildren } from "react";

// 定义FirebaseUserAuth类型（或从firebase/auth导入官方类型）
type FirebaseUserAuth = {
  uid: string;
  email: string;
  name?: string;
};

3. 重启开发服务器 #

路径变更后，需要重启Next.js开发服务器才能生效，避免缓存导致的旧代码运行。

完成以上步骤后，提交表单就能看到控制台输出SIGNIN FROM AUTHCONTEXT，页面也会显示User: c，说明signin方法正常执行了。

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