props.logout 不是 handleLogout 的函数

Question

我尝试在网络应用程序中执行注销功能。但是当我点击注销按钮时出现以下错误： props.logout 不是函数 在处理注销

这是代码

//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; // return true if logout is successful
      })
      .catch((error) => {
        const errorMessage = error.message;
        console.log(errorMessage);
        return false; // return false if logout fails
      });
  };
 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

应该做哪些改变来纠正它？或者也许有一些替代品这个