React TypeScript中LocalStorage与Redux Toolkit主题存储类型错误求解

你遇到的类型错误是因为localStorage.getItem("theme")的返回值是string | null，而JSON.parse()只接受string类型参数。当localStorage中没有"theme"键时，getItem返回null，直接传入JSON.parse就会触发类型不匹配的错误。

下面是几种可行的解决方法：

方法一：先获取值并做非空校验（推荐） #

先把localStorage的取值结果存到变量里，判断非空后再解析，同时给mode设置合理的默认值（比如"light"而不是空字符串，符合主题切换的逻辑）：

import { createSlice } from "@reduxjs/toolkit";

const storedTheme = localStorage.getItem("theme");
// 解析存储的主题，默认使用light模式
const initialMode = storedTheme ? JSON.parse(storedTheme) : "light";

const initialState = {
  mode: initialMode,
};

const ThemeSlice = createSlice({
  name: "theme",
  initialState,
  reducers: {
    toggleTheme: (state) => {
      state.mode = state.mode === "light" ? "dark" : "light";
      // 切换后同步更新localStorage
      localStorage.setItem("theme", JSON.stringify(state.mode));
    },
  },
});

export const { toggleTheme } = ThemeSlice.actions;
export default ThemeSlice.reducer;

方法二：添加类型断言（快速但需注意安全） #

如果你能确保localStorage中一定存在"theme"值（或已经做过前置处理），可以用类型断言强制告诉TypeScript这是string类型，但这种方式跳过了空值检查，存在潜在风险：

const mode = !localStorage.getItem("theme")
  ? "light"
  : JSON.parse(localStorage.getItem("theme") as string);

额外优化：显式定义状态类型 #

为了让TypeScript的类型检查更严格，可以显式定义ThemeState的类型，避免mode出现不符合预期的值：

import { createSlice } from "@reduxjs/toolkit";

type ThemeState = {
  mode: "light" | "dark";
};

const storedTheme = localStorage.getItem("theme");
const initialMode: ThemeState["mode"] = storedTheme ? JSON.parse(storedTheme) : "light";

const initialState: ThemeState = {
  mode: initialMode,
};

// 后续slice代码不变...

另外注意，你原来的代码没有在切换主题后更新localStorage，建议加上localStorage.setItem("theme", JSON.stringify(state.mode))，避免刷新页面后主题状态丢失。

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