运行时出现TypeError: Cannot read properties of undefined (reading 'error')求助

问题描述 #

运行代码时遇到错误：TypeError: Cannot read properties of undefined (reading 'error')，登录功能可成功完成，但屏幕底部仍会弹出该错误。

相关代码 #

登录组件代码 #

export const LoginForm = () => {
    
    const [error, setError] = useState<string | undefined>("");
    const [success, setSuccess] = useState<string | undefined>("");
    const [isPending, startTransition] = useTransition();

const form =useForm<z.infer<typeof LoginSchema>>({

    resolver: zodResolver(LoginSchema),
    defaultValues: {
        email:"",
        password:"",

    },

});

const onSubmit = (values: z.infer<typeof LoginSchema>) => {
    
    setError("");
    setSuccess("");
    
    startTransition(() => {

        login(values)
        .then((data) => {
            setError(data.error);
            setSuccess(data.success);
        });
        
    });

login函数代码 #

"use server";

import * as z from "zod";
import { AuthError } from "next-auth";
import { signIn } from "@/auth";
import { LoginSchema } from "@/schemas";
import { DEFAULT_LOGIN_REDIRECT } from "@/routes";

export const login = async(values: z.infer<typeof LoginSchema>) => {
    
const validatedFields = LoginSchema.safeParse(values);

    if (!validatedFields.success) {
        return { error: "Invalid fields!"};
    }

const { email, password } = validatedFields.data;

try {

    await signIn("credentials", {
        email,
        password,
        redirectTo: DEFAULT_LOGIN_REDIRECT
    })

} catch (error) {
    if(error instanceof AuthError) {
        
        switch(error.type) {
        case "CredentialsSignin":
            return { error: "Invalid credentials!"}

        default:
            return { error: "Something went wrong!"}           
            
        }
    
    }

    throw error;

}

};

登录成功后返回的用户信息 #

{
  "user": {
    "name": "kalyan Thatavarti",
    "email": "kalyan.thatavarti@gmail.com",
    "image": null
  },
  "expires": "2024-11-29T18:49:11.316Z"
}

问题原因 #

当登录成功时，login函数的try块中执行完await signIn(...)后，没有返回任何值，导致login(values).then(data => ...)中的data为undefined。此时尝试访问data.error就会触发TypeError。

解决方案 #

1. 修改login函数，登录成功时返回success信息 #

在login函数的try块中，await signIn执行成功后，添加返回语句：

try {
    await signIn("credentials", {
        email,
        password,
        redirectTo: DEFAULT_LOGIN_REDIRECT
    });
    // 登录成功时返回success字段
    return { success: "登录成功!" };
} catch (error) {
    // 原有错误处理逻辑不变
}

2. 组件中增加data存在性判断，避免访问undefined属性 #

修改onSubmit中的then回调，先判断data是否存在再访问其属性：

login(values)
.then((data) => {
    setError(data?.error);
    setSuccess(data?.success);
});

或者更严谨的写法：

login(values)
.then((data) => {
    if (data) {
        setError(data.error);
        setSuccess(data.success);
    } else {
        // 登录成功且无返回数据时，可手动设置success提示
        setSuccess("登录成功!");
    }
});

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