使用useSWR从Firebase拉取数据返回undefined且页面持续加载如何解决

你遇到的问题核心是缺少useSWR必填的fetcher取数函数：

• useSWR本身不内置请求能力，必须显式传入用于发起HTTP请求、解析响应的fetcher方法作为第二个参数，否则不会自动拉取数据，data会一直为undefined。

1. 先定义fetcher函数，用于处理fetch请求和响应解析：

const fetcher = (url) => fetch(url).then(res => {
  if (!res.ok) throw new Error('请求失败')
  return res.json()
})

2. 将fetcher作为第二个参数传入useSWR调用：

const { data, error } = useSWR(
  'https://nextjs-2021-default-rtdb.firebaseio.com/sales.json',
  fetcher
)

3. （可选）如果项目多处使用useSWR，可以在根组件配置全局fetcher，避免重复传参：

import { SWRConfig } from 'swr'

function App() {
  return (
    <SWRConfig value={{ fetcher: (url) => fetch(url).then(res => res.json()) }}>
      {/* 你的业务组件 */}
    </SWRConfig>
  )
}

如果修改后还是拉不到数据，可以逐一检查：

• 确认Firebase实时数据库的权限规则已开放读权限，测试阶段可以临时设置规则为".read": true，否则会返回403错误
• 直接在浏览器地址栏访问你填的Firebase链接，确认能正常返回JSON数据，节点路径没有写错

import { useEffect, useState } from 'react';
import useSWR from 'swr';

// 新增fetcher函数
const fetcher = (url) => fetch(url).then(res => res.json());

function LastSalesPage() {
  const [sales, setSales] = useState();

  const { data, error } = useSWR(
    'https://nextjs-2021-default-rtdb.firebaseio.com/sales.json',
    fetcher // 传入fetcher
  );

  console.log('Data:', data);

  useEffect(() => {
    if (data) {
      const transformedSales = [];

      for (const key in data) {
        transformedSales.push({
          id: key,
          username: data[key].username,
          volume: data[key].volume,
        });
      }

      setSales(transformedSales);
    }
  }, [data]);

  if (error) {
    return <p>Failed to load.</p>;
  }

  if (!data || !sales) {
    return <p>Loading...</p>;
  }

  return (
    <ul>
      {sales.map((sale) => (
        <li key={sale.id}>
          {sale.username} - ${sale.volume}
        </li>
      ))}
    </ul>
  );
}

export default LastSalesPage;

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