useEffect清理函数dispatch clear action触发TypeScript错误如何解决？

报错根本原因 #

该TypeScript报错和clear action类型没有直接关联，核心问题是useEffect的清理函数返回值不符合类型约束：

• 你使用了redux-thunk中间件，dispatch调用异步thunk时的返回值为thunk函数的执行结果，也就是你代码里的Promise<null | undefined>
• React要求useEffect的清理函数只能返回void类型，你隐式返回了dispatch产生的Promise，不符合类型要求，因此触发报错。

解决步骤 #

1. 修复useEffect类型报错 #

只需让清理函数不返回任何值即可，两种实现方式可选：

useEffect(() => {
  dispatch(fetchMovieDetails(movieId!));
  // 方案1：加花括号，无返回值
  return () => {
    dispatch(fetchMovieDetails(movieId!, "clear"));
  };

  // 方案2：用void运算符忽略返回值
  // return () => void dispatch(fetchMovieDetails(movieId!, "clear"));
}, [dispatch, movieId]);

2. 定义clear action的TypeScript类型 #

如果需要给fetchMovieDetails thunk加完整的类型约束，可以参考如下定义：

import { ThunkAction } from 'redux-thunk';
import { RootState } from './store'; // 替换为你项目的根状态类型

// 定义可触发的action联合类型
type MovieDetailsAction = 
  | { type: 'FETCH_MOVIE_DETAILS_SUCCESS', payload: Movie } // 替换Movie为你的电影数据类型
  | { type: 'FETCH_MOVIE_DETAILS_CLEAR' }

// 定义thunk入参的联合类型
type FetchMovieDetailsParams = 
  | [movieId: string]
  | [movieId: string, mode: 'clear']

// thunk函数定义
const fetchMovieDetails = (...args: FetchMovieDetailsParams): ThunkAction<
  Promise<null | undefined>, // thunk执行返回值类型
  RootState, // 项目根状态类型
  unknown, // thunk额外参数类型，无额外参数可留空
  MovieDetailsAction // 可dispatch的action类型
> => {
  // clear模式逻辑
  if (args.length === 2 && args[1] === 'clear') {
    return async (dispatch) => {
      dispatch({ type: 'FETCH_MOVIE_DETAILS_CLEAR' });
      return null;
    }
  }
  // 正常拉取数据逻辑
  const [movieId] = args;
  return async (dispatch) => {
    const res = await fetch(`/api/movies/${movieId}`);
    const data = await res.json();
    dispatch({ type: 'FETCH_MOVIE_DETAILS_SUCCESS', payload: data });
  }
}

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