点击Admin页面编辑用户时触发TypeError: user is null错误

在Admin页面点击用户标签页的「编辑」按钮时，出现未处理的运行时错误：TypeError: user is null，问题与UserForm.js组件及编辑用户页面逻辑相关。

错误原因分析 #

• EditUserPage的fetch逻辑存在变量错误：在src/app/users/[id]/page.js的useEffect中，执行users.find(u => u._id === id)后未将结果赋值给变量，直接调用setUser(user)，此处的user是组件初始状态的null，导致用户数据始终无法正确设置。
• UserForm未处理user为null的边界情况：UserForm.js的邮箱输入框直接访问user.email，未做可选链判断，当user为null时会直接抛出错误。
• EditUserPage缺少用户数据加载状态处理：在fetch请求完成前，user保持null状态，页面直接渲染UserForm组件，未做加载状态兜底。

修复方案 #

1. 修正EditUserPage的fetch逻辑 #

修改src/app/users/[id]/page.js中的useEffect代码，正确获取并设置用户数据，同时补充加载状态判断：

'use client';
import {UserTabs} from "@/components/layout/UserTabs";
import {useProfile} from "@/components/UseProfile";
import UserForm from "@/components/layout/UserForm";
import { useEffect, useState } from "react";
import { useParams } from "next/navigation";

export default function EditUserPage(){
    const {loading,data} =useProfile();
    const [user, setUser] =useState(null);
    const {id} = useParams();

    useEffect(() => {
        fetch('/api/users').then(res => {
          res.json().then(users => {
            const foundUser = users.find(u => u._id === id);
            setUser(foundUser);
          });
        })
      }, [id]); // 添加id为依赖项，路由参数变化时重新请求

    function handleSaveButtonClick(ev, data){

    }

    
    if(loading){
        return 'Loading users info...'
    }

    if(!data.admin){
        return 'Not an admin'
    }

    if(!user){
        return 'Loading user details...'
    }
    
    return (
        <section className="mt-8 mx-auto max-w-2xl ">
            <UserTabs isAdmin={true} />
            <div className="mt-8">
              <UserForm user={user} onSave={handleSaveButtonClick}/>
            </div>
        </section>
    )
}

2. 修复UserForm的邮箱输入框 #

修改UserForm.js中的邮箱输入部分，添加可选链和默认值，避免null访问错误：

<input
  type="email"
  disabled={true}
  value={user?.email || ''}
  placeholder={'email'}
/>

内容的提问来源于stack exchange，提问作者Gia Khánh Lê