Использование earchparams () должно быть обернуто в границу подвески на странице "/find/searchresults" ⇐ Javascript

[Anonymous]

Я попытался завершить свой код в теги с приостановкой, но я все еще получаю следующую ошибку, создавая производственную сборку моего приложения NextJS. < /p>

Код: Выделить всё

 ⨯ useSearchParams() should be wrapped in a suspense boundary at page "/find/searchResults". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
at a (/home/yash/nextjs-hireme/hireme/.next/server/chunks/244.js:1:6747)
at f (/home/yash/nextjs-hireme/hireme/.next/server/chunks/244.js:1:23270)
at h (/home/yash/nextjs-hireme/hireme/.next/server/app/find/searchResults/page.js:1:3734)
at nO (/home/yash/nextjs-hireme/hireme/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:20:45959)
at nI (/home/yash/nextjs-hireme/hireme/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:20:47734)
at nL (/home/yash/nextjs-hireme/hireme/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:20:65533)
at nN (/home/yash/nextjs-hireme/hireme/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:20:63164)
at n$ (/home/yash/nextjs-hireme/hireme/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:20:46311)
at nI (/home/yash/nextjs-hireme/hireme/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:20:47780)
at nI (/home/yash/nextjs-hireme/hireme/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:20:62515)
Error occurred prerendering page "/find/searchResults". Read more: https://nextjs.org/docs/messages/prerender-error
Export encountered an error on /find/searchResults/page: /find/searchResults, exiting the build.
⨯ Static worker exited with code: 1 and signal: null
< /code>
Я также попробовал переустановить зависимости, но ничего не работает.
На этой странице отображаются результаты поиска, извлеченные компонентом поиска.
Вот моя структура папки: < / / p>
app/
├── components/
|      ├── search-services.jsx
|
├── find/
│     ├── searchResults/
│     |         ├── page.jsx
│     ├── page.jsx
< /code>
Вот мой код: < /p>
"use client";

import React, { useEffect, useState, Suspense } from "react";
import { useSearchParams } from "next/navigation";
import searchServices from "../../components/search-services";
import Link from "next/link";
import ServiceDetails from "../../components/service-details";
import { auth, db } from "../../firebase/config";
import { doc, getDoc } from "firebase/firestore";
import calculateDistance from "../../components/calculate-distance";

const SearchResults = () => {
const searchParams = useSearchParams();
const searchTerm = searchParams.get("query").trim() || "";
const [results, setResults] = useState([]);
const [loading, setLoading] = useState(true);
const [selectedService, setSelectedService] = useState(null);
const [userLocation, setUserLocation] = useState(null);

const handleServiceClick = (service) => setSelectedService(service);
const handleCloseDetails = () => setSelectedService(null);

// Fetch user location from Firestore
useEffect(() => {
const fetchUserLocation = async () => {
auth.onAuthStateChanged(async (user) => {
if (user) {
const docRef = doc(db, "Users", user.uid);
const docSnap = await getDoc(docRef);
if (docSnap.exists()) {
const userData = docSnap.data();
if (userData.location) {
setUserLocation(userData.location); // Assume location is { latitude, longitude }
}
}
} else {
console.log("User is not logged in");
}
});
};

fetchUserLocation();
}, []);

// Fetch search results
useEffect(() => {

const fetchResults = async () => {
if (!searchTerm) return;
setLoading(true);
try {
const services = await searchServices(searchTerm);
setResults(services);
} catch (error) {
console.error("Error fetching search results:", error);
}
setLoading(false);
};

fetchResults();

}, [searchTerm]);

return (


Search Results for "{searchTerm}"

← Back to Search


{loading ? (
Loading...
) : results.length === 0 ? (
No services found.
) : (

{results.map((service) => {
const distance = userLocation && service.location
? calculateDistance(userLocation, service.location)
: null;
return (
 {
e.stopPropagation();
handleServiceClick(service);
}}>

{service.title}

{service.description}



Provider: {service.providerName}
Phone: {service.providerPhone}
Email: {service.providerEmail}

{distance !== null &&  (


{distance.toFixed(2)} km


)}



₹{parseFloat(service.price.min).toFixed(2)} - ₹{parseFloat(service.price.max).toFixed(2)}

{new Date(service.timestamp).toLocaleDateString('en-GB')}


);
})}

)}

{/* Display selected service details */}
{selectedService && (

)}


);
};

export default SearchResults;

Я запускаю следующую. JS 15.1.6

Подробнее здесь: https://stackoverflow.com/questions/794 ... ind-search