React TypeScript状态初始化遇TS2345错误：void类型无法赋值

错误原因 #

你遇到的问题核心是：useState的初始化函数要求同步返回对应类型的值，但你可能直接传入了异步函数（比如带await的请求函数），或者初始化函数本身没有返回值（返回void），导致类型不匹配。

正确实现方案 #

useState不支持直接用异步函数初始化状态，正确的做法是先用默认值初始化，再通过useEffect执行异步请求更新状态：

import { useState, useEffect } from 'react';

// 先定义Quote类型
interface Quote {
  text: string;
  author: string;
  // 根据你的接口补充其他字段
}

// 异步获取数据的函数
const fetchQuote = async (): Promise<Quote> => {
  const response = await fetch('你的接口地址');
  return response.json();
};

const QuoteComponent = () => {
  // 用null或符合Quote结构的默认值初始化状态
  const [quote, setQuote] = useState<Quote | null>(null);

  useEffect(() => {
    // 在useEffect内部执行异步逻辑
    const getInitialQuote = async () => {
      const data = await fetchQuote();
      setQuote(data);
    };

    getInitialQuote();
  }, []); // 空依赖数组确保只在组件挂载时执行一次

  // 处理加载状态
  if (!quote) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      <p>{quote.text}</p>
      <p>—— {quote.author}</p>
    </div>
  );
};

export default QuoteComponent;

为什么之前的写法会报错 #

• 如果你直接写useState(fetchQuote())，fetchQuote()返回的是Promise<Quote>，不是Quote类型，不符合useState的初始值要求。
• 如果你写useState(() => { fetchQuote().then(res => setQuote(res)) })，这个初始化函数没有返回值（类型是void），不满足() => Quote的函数类型要求。

不要用any绕过类型检查，这会丢失TypeScript的类型安全优势，按照上述方式处理异步初始化逻辑即可解决问题。

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