TypeScript中useEffect调用数据库时类型不兼容错误求助

错误原因 #

问题核心是Promise回调的参数类型不匹配：services.bookData.getBookInfo返回的Promise实际类型是Promise<bookContent | undefined>，但你在then回调里把参数res强制标注成了bookContent——TypeScript不允许把可能为undefined的值直接当成确定的bookContent类型使用，这就是报错的根源。和函数返回值无关，你之前的理解有偏差。

解决方案 #

1. 修正回调参数类型（最直接解决）

要么去掉手动标注的类型，让TypeScript自动推断；要么明确标注参数为bookContent | undefined：

useEffect(() => {
    services.bookData
      .getBookInfo(bookID)
      // 去掉手动类型标注，TS自动识别res为bookContent | undefined
      .then((res) => {
        if (res) {
          setContent({
            id: res.id,
            name: res.name,
            info: res.info,
            type: res.type,
          });
          dispatch(bookContentThunk(content));
        }
      })
      .catch((err: any) => {
        throw new Error(`Error in retrieving book details. ${err}`);
      });
  }, [user.status]);

2. 调整服务层类型定义（业务允许时）

如果你能确定getBookInfo一定会返回有效的bookContent，不会出现undefined，可以修改这个方法的返回类型为Promise<bookContent>，上层代码就不用处理空值情况了。但要确保这个修改符合实际业务逻辑，避免运行时空值报错。

3. 可选优化：避免组件卸载后的无效状态更新

在useEffect中添加挂载状态标记，防止组件卸载后Promise才resolve导致的错误：

useEffect(() => {
    let isMounted = true;

    services.bookData
      .getBookInfo(bookID)
      .then((res) => {
        // 仅组件挂载时更新状态
        if (isMounted && res) {
          setContent({
            id: res.id,
            name: res.name,
            info: res.info,
            type: res.type,
          });
          dispatch(bookContentThunk(content));
        }
      })
      .catch((err: any) => {
        if (isMounted) {
          throw new Error(`Error in retrieving book details. ${err}`);
        }
      });

    // 组件卸载时标记为未挂载
    return () => {
      isMounted = false;
    };
  }, [user.status]);

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