自定义Hook实现API请求报错：TypeError: Cannot read properties of null (reading 'useState')

可能的原因及解决办法 #

1. 违反React Hook调用规则 #

Hook必须在React函数组件的顶层或其他自定义Hook的顶层调用，禁止在普通函数、条件判断、循环嵌套里调用useFetch。

错误示例：

// 错误：在普通函数内调用Hook
function fetchData() {
  const { data } = useFetch('users');
}

正确示例：

// 正确：在React函数组件顶层调用
function UserList() {
  const { data } = useFetch('users');
  
  return <div>{data && JSON.stringify(data)}</div>;
}

2. 在Next.js服务器组件中调用客户端Hook #

Next.js 12默认组件为服务器组件，而useState、useEffect属于客户端Hook，无法在服务器组件中使用。需将调用useFetch的组件标记为客户端组件：

在组件文件顶部添加：

'use client';

示例：

'use client'; // 标记为客户端组件
import { useFetch } from '../hooks/useFetch';

function UserList() {
  const { data } = useFetch('users');
  
  return <div>{data && JSON.stringify(data)}</div>;
}

3. 检查依赖完整性 #

若上述方法无效，可尝试重置依赖：

rm -rf node_modules package-lock.json
npm install

你的useFetch代码逻辑本身无问题，错误根源在于调用Hook的场景不符合规则或Next.js组件类型限制。

内容的提问来源于stack exchange，提问作者Cláudio Vitor Dantas