我正在处理一个网页，让用户登录/登录，然后他们被重定向到user/[id]，其中id是他们在数据库上的唯一标识符，获取用户信息的过程工作正常，但是当我尝试在他们注销后将他们重定向回根/页面时，（会话被破坏），但页面被重新加载，但没有显示用户数据。
起初我以为这是我的索引页面的问题，因为如果有活动会话，我使用useEffect钩子将用户重定向到user/[id]页面，但我已经通过注解router.push()函数进行了测试，以防止它重定向，并且在尝试注销后仍然出现空的用户页面。
本项目的结构如下：

src
  pages
    api
      user
        [id].ts
      logout.ts
    user
      [id].tsx
    index.tsx

我的index.tsx页面

import {useEffect} from 'react';
import { Button, Card, Row } from 'react-bootstrap';
import axios from 'axios';
import { useRouter } from 'next/navigation';

export default function Home() {
  const router = useRouter()
  

  useEffect(() =>{
      sessionHandler();
  },[])

    const sessionHandler = async () => {
        const session = await axios.get(`http://localhost:3000/api/session`)
        if(session.data !== null){
            router.push(`/user/${session.data.id}`)
        }
        
    }
  
  return(
      <Card className='text-center'>
          <Card.Body>
              <Card.Title>Bienvenido al sistema de Clientes de National Unity</Card.Title>
              <Card.Text>Selecciona una de las opciones para ingresar al sistema</Card.Text>
              <Row className='my-2'>
                  <Button variant='primary' onClick={() => router.push('/logIn')}>Iniciar Sesión</Button>
              </Row>
              <Row className='my-2'>
                  <Button variant='secondary' onClick={() => router.push('/signin')}>Registrarse</Button>
              </Row>
              <Row className='my-2'>
                  <Button variant='info'>Ingresar como Invitado</Button>
              </Row>
          </Card.Body>
      </Card>
  )
}

user/[id].tsx页面

import  { useState, useEffect } from "react"
import { Form, Button, Card, Row, Container, Modal } from 'react-bootstrap'
import axios from "axios"
import { useRouter, useSearchParams } from "next/navigation";
import { signOut } from "next-auth/react";

function UserPage(){
    const router = useRouter()
    const searchParams = useSearchParams()
    
    const id = searchParams.get('id');
    
    const [user, setUser] = useState({
        id: null,
        name: null,
        email: null,
    })
    
    
    const getUser = async () =>{
        
        const result = await axios.get(`http://localhost:3000/api/user/${id}`)  
            
        setUser(result.data.user)
    }

    useEffect(() =>{
        getUser()
    },[])
    const handleDestroySession = async () =>{
        const result = await axios.get('http://localhost:3000/api/logout')
    }

    //Función para log out
    const logOut = async () =>{
        await handleDestroySession()
        router.push('/');
    }

    return(
        <Container>
            <Card>
                <Card.Body>
                    <Card.Title className='mb-3'>{user.name}</Card.Title>
                    <Card.Text className='mb-3'>{user.email}</Card.Text>
                    <Button onClick={logOut}>Log Out</Button>
                </Card.Body>
            </Card> 
        </Container>   
    )
}

export default UserPage

用户会话正确地在我的浏览器的开发工具的应用程序选项卡上被销毁，所以这不是问题所在。
我有其他路由器调用项目上的通用导航，因为我有其他页面，它在这些页面上工作正常，所以问题具体在这个页面上。
如果任何人有任何想法是什么可能导致这个问题，我将不胜感激的帮助。