React TypeScript中从Context获取fetchBooks时触发TS类型错误

问题原因 #

你遇到的Property 'fetchBooks' does not exist on type 'unknown'.ts(2339)错误，本质是Context的类型定义不严谨，同时组件未处理Context可能为null的情况，导致TypeScript无法推断fetchBooks的类型。

修复步骤 #

1. 修正Context的类型定义 #

在context/app.tsx中，移除不必要的any类型，保留正确的泛型定义，同时给异步函数fetchBooks指定返回类型：

import { createContext, useState, useCallback } from "react";
import axios from "axios";

type AppContextType = {
  fetchBooks: () => Promise<void>; // 异步函数返回Promise<void>
};

// 移除:any，保留泛型类型约束
const AppContext = createContext<AppContextType | null>(null);

function Provider({ children }: { children: React.ReactNode }) {
  // 给books添加类型，避免隐式any
  const [books, setBooks] = useState<unknown[]>([]);

  const fetchBooks = useCallback(async () => {
    const response = await axios.get("http://localhost:3001/books");
    // setBooks(response.data);
  }, []);

  return (
    <AppContext.Provider value={{ fetchBooks }}>
      {children}
    </AppContext.Provider>
  );
}

export { Provider };
export default AppContext;

2. 优化自定义Hook，处理null边界 #

在hooks/useAppContext.ts中，添加空值判断并抛出错误，确保组件获取的Context有效：

import { useContext } from "react";
import AppContext from "../context/app";
import type { AppContextType } from "../context/app";

function useAppContext() {
  const context = useContext(AppContext);
  // 若未在Provider内使用Hook，直接抛出错误提前排查问题
  if (!context) {
    throw new Error("useAppContext必须在AppContext.Provider内部使用");
  }
  return context as AppContextType;
}

export default useAppContext;

3. 组件中使用优化后的Hook #

在BooksCarousel.tsx中，改用自定义Hook替代直接调用useContext，自动获取正确类型：

import { useEffect } from "react";
import useAppContext from "../../../../shared/hooks/useAppContext";

const BooksCarousel = () => {
  const { fetchBooks } = useAppContext();
  
  useEffect(() => {
    fetchBooks();
  }, [fetchBooks]);

  return (
    <div>
      {/* jsx code */}
    </div>
  )
};

export default BooksCarousel;

额外说明 #

• 给异步函数指定返回类型是TypeScript的规范，能避免隐式类型推断错误
• 在Hook中处理空值，可提前捕获"未在Provider范围内使用Hook"的运行时问题
• 移除any类型后，TypeScript的类型检查能帮你提前发现潜在的逻辑错误

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