Next.js+TypeScript块级变量提前使用错误求助

问题根源 #

你当前的代码存在两个核心问题：

1. 变量提前使用：调用useZiarahModule(page, pageSize)时，page和pageSize还未被声明（它们是在后续usePagination中才解构出来的），直接触发了TS的变量声明顺序错误。
2. 循环依赖：查询钩子useGetZiarah需要分页参数，而分页钩子usePagination又依赖查询返回的dataZiarah，形成了无法打破的循环。

解决方案 #

重构代码结构，打破循环依赖，调整变量声明顺序：

1. 先初始化分页的基础状态（初始页码、每页条数）
2. 用初始分页参数发起第一次数据查询
3. 数据返回后再同步给分页钩子，用于计算总页数等逻辑
4. 将分页参数作为React Query的查询键，实现分页变化时自动重新查询

修改后的代码示例 #

1. ziarah.section.tsx（核心调整）

import { useEffect } from 'react';

// 定义初始分页参数
const INITIAL_PAGE = 1;
const INITIAL_PAGE_SIZE = 10;

const ZiarahSection = () => {
  // 先初始化分页钩子，初始数据传undefined，后续更新
  const { page, pageSize, setPage, setPageSize, setData, totalPages } = usePagination({
    initialPage: INITIAL_PAGE,
    initialPageSize: INITIAL_PAGE_SIZE,
    initialData: undefined,
  });

  // useZiarahModule无需接收分页参数，内部钩子单独接收
  const { useGetZiarah, useDeleteZiarah } = useZiarahModule();

  // 将page、pageSize传给useGetZiarah，作为查询键的一部分
  const { data: dataZiarah, isLoading, error } = useGetZiarah(page, pageSize);

  // 数据返回后同步给分页钩子，用于计算总页数等
  useEffect(() => {
    if (dataZiarah) {
      setData(dataZiarah);
    }
  }, [dataZiarah, setData]);

  // 后续业务逻辑...
  return (
    // 你的UI渲染代码
  );
};

export default ZiarahSection;

2. ziarah.service.ts（调整useGetZiarah参数接收方式）

import { useQuery } from '@tanstack/react-query';

const useZiarahModule = () => {
  // 让useGetZiarah直接接收page和pageSize参数
  const useGetZiarah = (page = 1, pageSize = 10) => {
    return useQuery({
      // 将page、pageSize加入查询键，参数变化时自动重新查询
      queryKey: ['ziarah-list', page, pageSize],
      queryFn: async () => {
        // 替换为你的实际API请求逻辑，携带分页参数
        const response = await fetch(`/api/ziarah?page=${page}&pageSize=${pageSize}`);
        if (!response.ok) throw new Error('请求失败');
        return response.json();
      },
    });
  };

  const useDeleteZiarah = () => {
    // 你的删除逻辑保持不变
  };

  return { useGetZiarah, useDeleteZiarah };
};

export default useZiarahModule;

3. usePagination.ts（支持动态更新数据）

import { useState } from 'react';

const usePagination = ({ initialPage, initialPageSize, initialData }) => {
  const [page, setPage] = useState(initialPage);
  const [pageSize, setPageSize] = useState(initialPageSize);
  const [data, setData] = useState(initialData);

  // 计算总页数（假设你的返回数据包含total字段）
  const totalPages = data ? Math.ceil(data.total / pageSize) : 0;

  // 分页操作示例：下一页
  const handleNextPage = () => {
    if (page < totalPages) {
      setPage(prev => prev + 1);
    }
  };

  // 分页操作示例：上一页
  const handlePrevPage = () => {
    if (page > 1) {
      setPage(prev => prev - 1);
    }
  };

  return {
    page,
    pageSize,
    setPage,
    setPageSize,
    setData, // 新增：用于动态更新数据源
    totalPages,
    handleNextPage,
    handlePrevPage,
  };
};

export default usePagination;

关键说明 #

• 变量声明顺序：先初始化分页状态，再发起查询，彻底解决"变量提前使用"的TS错误。
• React Query查询键：将page和pageSize加入queryKey，React Query会自动监听参数变化，触发重新查询，无需手动处理分页变化的请求逻辑。
• 打破循环依赖：分页钩子先使用初始值运行，待数据返回后再同步数据源，避免了查询与分页互相等待的死循环。

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