Next.js 13聊天应用登录页TypeScript 'email'变量错误求助

• 问题根源：你代码中直接使用了email变量，但当前作用域并未单独声明它——你把邮箱值存在了user状态对象里，所以必须从user对象中访问该属性，或者先解构出email变量。

• 具体修正步骤：

  1. 修正Input组件的value绑定
     如果你是这样声明的状态：

     const [user, setUser] = useState<{ email: string; password: string }>({ email: "", password: "" });
     

     那么input的value不能写value={email}，要改成：

     <input
       type="email"
       value={user.email}
       onChange={(e) => setUser(prev => ({ ...prev, email: e.target.value }))}
       placeholder="邮箱"
     />
     

  2. 修正signIn调用的参数
     错误的写法（直接用未定义的email）：

     await signIn("credentials", { email, password, redirect: false });
     

     修正后（使用user.email）：

     await signIn("credentials", { email: user.email, password: user.password, redirect: false });
     

  3. 可选：解构状态变量简化代码
     如果你不想每次都写user.email，可以在组件内解构状态对象，这样email变量就会被声明在当前作用域：

     const [user, setUser] = useState<{ email: string; password: string }>({ email: "", password: "" });
     const { email, password } = user; // 解构后可直接使用email变量
     

     之后input和signIn调用就可以直接用email了：

     <input type="email" value={email} onChange={(e) => setUser(prev => ({ ...prev, email: e.target.value }))} />
     // ...
     await signIn("credentials", { email, password, redirect: false });
     

• 注意：这个错误和Prisma Schema、MySQL数据库的email字段无关，纯粹是TypeScript检测到你使用了未在当前作用域声明的变量，只要确保代码中用到的email是已定义的（要么是从状态对象中访问，要么是通过解构声明）即可。

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