Next.js类型错误：object | undefined无法赋值给SetStateAction<string>

错误原因 #

你遇到的类型错误本质是状态类型不兼容：

• UserData的初始状态被定义为字符串类型（useState("")）
• 但signInWithGoogle()返回的UserInfo是object | undefined类型，直接通过setUserData(UserInfo)赋值会触发类型检查报错。

解决方案 #

1. 修正状态的类型定义

根据UserInfo的实际结构，调整UserData的状态类型，确保和赋值的类型匹配：

// 方式1：明确用户信息结构（推荐）
interface UserInfo {
  uid: string;
  displayName?: string;
  email?: string;
  photoURL?: string;
  // 添加你需要的其他字段
}
const [UserData, setUserData] = useState<UserInfo | undefined>(undefined);

// 方式2：不确定结构时使用通用类型
const [UserData, setUserData] = useState<object | undefined>(undefined);

2. 处理登录结果的边界情况

signInWithGoogle()可能返回undefined（登录失败时），所以先判断结果是否有效再更新状态：

const signin=async()=>{
  setProgress(10)
  const UserInfo=await signInWithGoogle();
  if (UserInfo) {
    setUser(true)
    setUserData(UserInfo)
    console.log(UserData);
  } else {
    // 可选：添加登录失败的提示逻辑
    alert("登录失败，请稍后重试")
  }
  setProgress(100)
}

3. 登出时同步重置用户数据

登出操作完成后，记得重置UserData，保证状态一致性：

const signout=async()=>{
  console.log("sign out");
  setProgress(30)
  alert("Press OK to Log Out")
  await signOutWithGoogle(); // 加await确保登出完成再更新状态
  setProgress(70)
  setUser(false)
  setUserData(undefined); // 重置用户数据
  setProgress(100)
}

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