如何摆脱 useSearchParams() 和 Suspense 部署错误？

Question

我得到 ⨯ useSearchParams() 应该被包裹在页面“/PaymentPage”的悬念边界中。了解更多：https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout

问题是我已经将所有内容都包装在 Suspense 中，但在尝试部署应用程序时仍然遇到此错误。

'use client';
import React, { useEffect, useState, Suspense } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import PayPalPaymentButtons from '../ui/PayPalButtons';
import ContactForm from '../ui/contact-form';

const PaymentPage: React.FC = () => {
  const router = useRouter();
  const searchParams = useSearchParams();
  const amount = searchParams ? searchParams.get('amount') : null;

  const [paypalClientId, setPaypalClientId] = useState<string | null>(null);

  useEffect(() => {/*...*/}, []);

  if (!paypalClientId) {
    return <Suspense fallback={<div>Loading...</div>}><div>Loading...</div></Suspense>;
  }

  const handleSuccess = () => {
    // Redirect to success page or perform any other action
    router.push('/');
  };

  const handleError = (error: any) => {
    // Handle error, display message, or retry payment
    console.error('Payment error:', error);
  };

  return (
    <Suspense fallback={<div>Loading...</div>}>
    {/* ... */}
    </Suspense>
  );
};

export default PaymentPage;

Answer 1

请理解，您必须将钩子调用包装在

Suspense

边界内。因此，请不要在

Suspense

内部使用

PaymentPage

，而应在其周围使用

Suspense

。

    <Suspense fallback={<div>Loading...</div>}>
    <PaymentPage />
    </Suspense>

如果

PaymentPage

用作页面，请多使用一层换行：

    <Suspense fallback={<div>Loading...</div>}>
    <PaymentComponent />
    </Suspense>

const PaymentComponent = () => {
  const router = useRouter();
  const searchParams = useSearchParams();
  ....
  
}