TypeScript setState类型错误排查：string | null无法赋值给string

错误根源 #

你遇到的类型错误，本质是**localStorage.getItem("user")返回类型为string | null，而JSON.parse()的参数要求是string类型**，当localStorage中没有"user"项时，传入null就会触发类型不匹配报错。另外，JSON.parse()的返回值是unknown类型，直接赋值给User | null也存在类型安全隐患。

修复方案 #

我们需要先处理localStorage的返回值，确保传给JSON.parse()的是合法字符串，再处理解析后的类型匹配问题，具体修改如下：

修改后的完整代码

import "./App.css";
import LoginPage from "./Components/LoginPage";
import HomePage from "./Components/HomePage.tsx";
import ProtectedRoute from "./Components/ProtectedRoute.tsx";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { useState, useEffect } from "react";

interface User {
  name: string;
  phone: string;
  email: string;
}

function App() {
  // 初始化state：先判断localStorage值是否存在，再解析并断言类型
  const storedUser = localStorage.getItem("user");
  const [user, setUser] = useState<User | null>(
    storedUser ? (JSON.parse(storedUser) as User) : null
  );

  useEffect(() => {
    const storedUser = localStorage.getItem("user");
    if (storedUser) {
      try {
        // 解析前确保是字符串，解析后断言为User类型
        const parsedUser = JSON.parse(storedUser) as User;
        setUser(parsedUser);
      } catch (error) {
        // 处理JSON解析失败的情况（比如存储的数据格式错误）
        console.error("解析用户数据失败:", error);
        setUser(null);
      }
    } else {
      // 没有存储的用户数据时，设置为null
      setUser(null);
    }
  }, []);
  
  return (
    <Router>
      <Routes>
        <Route path="/login" element={<LoginPage />} />
        <Route
          path="/"
          element={<ProtectedRoute isAuthenticated={user !== null} />}
        >
          <Route path="/home" element={<HomePage />} />
        </Route>
      </Routes>
    </Router>
  );
}

export default App;

关键修改点说明 #

• 处理localStorage的空值：先判断storedUser是否为string，只有存在值时才调用JSON.parse()，避免传入null导致类型错误。
• 类型断言：用as User告诉TypeScript，解析后的结果符合User接口的结构（如果能确保存储的用户数据格式正确，这个断言是安全的；如果需要更严谨的类型检查，可以添加自定义类型守卫）。
• 异常捕获：添加try/catch处理JSON解析失败的情况，避免因存储的数据格式错误导致页面崩溃。

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