React Web应用登出功能报错：props.logout is not a function 求助

错误信息 #

props.logout is not a function
at handleLogout

相关代码 #

mainpage.js #

const handleLogout = async () => {
  const logOutSuccess = props.logout();

  if (logOutSuccess) {
    navigate("/");
  } else {
    console.log("Sign out failed");
  }
};

app.js #

let logoutHandler = () => {
  const auth = getAuth(app);
  return signOut(auth)
    .then(() => {
      console.log("User signed out successfully");
      return true; // 登出成功返回true
    })
    .catch((error) => {
      const errorMessage = error.message;
      console.log(errorMessage);
      return false; // 登出失败返回false
    });
};
return (
  <div className="App">
    <Routes>
      <Route path="/" element={<Firstpage />} />

      <Route path="/LogIn" element={<SignIn login={loginHandler} />} />
      <Route
        path="/SignUp"
        element={
          <SignUp
            message={errorMessage}
            register={registrationHandler}
            errorMessage={errorMessage}
          />
        }
      />
      <Route path="/mainpage" element={<Mainpage />} />
      {/*  <Route path="/workputpage" element={<Workoutpage />} />*/}
      <Route path="/" element={<Mainpage logout={logoutHandler} />} />
    </Routes>
  </div>
);

问题分析 #

报错核心原因有两个：

1. 路由配置错误：访问/mainpage路径时，渲染的<Mainpage />没有传入logout props；而/路径下的<Mainpage logout={logoutHandler} />是无效的，因为已有一个/路由指向<Firstpage />，匹配时会优先命中前者，导致实际访问/mainpage时组件拿不到logout方法。
2. 异步处理遗漏：logoutHandler返回的是Promise对象，直接赋值logOutSuccess会拿到Promise而非布尔值，无法正确判断登出结果。

修复步骤 #

1. 修正路由配置 #

修改app.js中的/mainpage路由，给<Mainpage />传入logout props，同时删除重复的/路径路由：

// app.js中Routes部分修改后
<Routes>
  <Route path="/" element={<Firstpage />} />

  <Route path="/LogIn" element={<SignIn login={loginHandler} />} />
  <Route
    path="/SignUp"
    element={
      <SignUp
        message={errorMessage}
        register={registrationHandler}
        errorMessage={errorMessage}
      />
    }
  />
  // 给Mainpage传入logout props
  <Route path="/mainpage" element={<Mainpage logout={logoutHandler} />} />
  {/*  <Route path="/workputpage" element={<Workoutpage />} />*/}
  // 删除重复的/路径路由
</Routes>

2. 修复异步逻辑 #

在mainpage.js的handleLogout中添加await，等待Promise返回结果：

const handleLogout = async () => {
  // 加上await等待登出操作完成
  const logOutSuccess = await props.logout();

  if (logOutSuccess) {
    navigate("/");
  } else {
    console.log("Sign out failed");
  }
};

替代方案：使用React Context管理认证状态 #

如果后续有多个组件需要调用登出或其他认证方法，用props传递会导致"属性层层传递"的问题，可以改用React Context统一管理：

1. 创建AuthContext #

import { createContext, useContext } from 'react';
import { getAuth, signOut } from 'firebase/auth';
import app from './firebaseConfig'; // 你的firebase配置文件

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const auth = getAuth(app);

  const logout = async () => {
    try {
      await signOut(auth);
      console.log("User signed out successfully");
      return true;
    } catch (error) {
      console.log(error.message);
      return false;
    }
  };

  return (
    <AuthContext.Provider value={{ logout }}>
      {children}
    </AuthContext.Provider>
  );
};

// 自定义hooks方便组件调用
export const useAuth = () => useContext(AuthContext);

2. 在App外层包裹AuthProvider #

import { AuthProvider } from './AuthContext';

function App() {
  // ...其他代码
  return (
    <AuthProvider>
      <div className="App">
        {/* 路由配置 */}
      </div>
    </AuthProvider>
  );
}

3. 在Mainpage中直接使用 #

import { useAuth } from './AuthContext';
import { useNavigate } from 'react-router-dom';

const Mainpage = () => {
  const { logout } = useAuth();
  const navigate = useNavigate();

  const handleLogout = async () => {
    const logOutSuccess = await logout();
    if (logOutSuccess) {
      navigate("/");
    } else {
      console.log("Sign out failed");
    }
  };

  // ...其他组件代码
};

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