reactjs 为什么我的firebase函数返回一个null对象?

mftmpeh8  于 2023-06-05  发布在  React
关注(0)|答案(1)|浏览(133)

概述

我实现了一个react按钮(shippoOnboarding),当点击它时,它会调用一个firebase云函数。然后,云函数将发出一个API调用来获取一个链接并返回它。该链接应发送任何用户的链接时,他们点击按钮。
React按钮:

import React, { FC, useState, useEffect, useContext } from 'react';
import {NavBarController} from '../packages/controllers/navbar-controller/NavBarController';
import {MainContentContainer} from '../packages/components/atoms/main-content-container-atom/src';
import {NavButton} from '../packages/components/atoms/nav-button-atom/src';
import {Download} from '../packages/components/atoms/download-atom/src';

import {ChangeEmailFormController} from '../packages/controllers/change-email-form-controller/ChangeEmailFormController'

import { onboardVendor, shippoOnboarding } from  '../packages/services/firebase/firebase.utils';

import { useRouter } from 'next/router';

import {
    auth,
} from '../packages/services/firebase/firebase.utils';

import {UserContext} from '../packages/services/context/user-context';


export interface UserProfileProps {
    isSignUp?: boolean,
    userName?: string; 
    
}

const UserProflePage: FC<UserProfileProps> = ({isSignUp, userName}: UserProfileProps) => {
    const [revealForm, setRevealForm] = useState(null)
    const router = useRouter();
    const currentUser = auth.currentUser;
    const {userData} = useContext(UserContext);

    useEffect(() => {
        if (currentUser == null) {
            router.push('/');
        }
    }, [currentUser])

    return (
        <div className='h-screen w-full bg-gray-100'>
            <NavBarController/>
            <MainContentContainer css="flex justify-center">
                {revealForm === null ? 
                    <div className='flex flex-col lg:rounded-lg lg:bg-white lg:border-2 lg:h-80 lg:w-3/5 lg:mt-12'>
                        <div className='flex flex-col lg:flex-row lg:justify-center lg:mt-14'>
                            <div className='hidden border-2 border-dashed h-52 w-72 text-xs mt-2 lg:mt-0 pt-20 bg-white'>
                                <h3 className='text-sm text-center font-medium'>Upload Image</h3>
                                <div className='text-center'><Download /></div>
                            </div>
                            <div className='mt-10 lg:mt-0 lg:mx-5'>
                                <div className='flex flex-row border-b-2 pb-2 my-2 lg:w-72 w-full font-lg font-light'><h3 className=''>Welcome </h3><h3 className='capitalize ml-1'>{userData.fname}</h3></div>
                                <div className='font-light italic text-sm mb-4'><h3>Thanks for shopping ethically!</h3></div>
                                <div className='flex flex-col align-center'>
                                    <NavButton label='change email' color='white' bgColor='primary' css='mb-3' onClick={() => setRevealForm('email')}/>
                                    <NavButton label='change password' color='white' bgColor='primary' css='mb-3' onClick={() => setRevealForm('password')}/>
                                    {userData.isVendor ? 
                                    <NavButton 
                                        label='become a seller' 
                                        color='white' 
                                        bgColor='primary' 
                                        onClick={() => onboardVendor().then(obj => router.push(obj.data.url))}
                                    /> : 
                                    null}
                                    {userData.isVendor ? 
                                    <NavButton 
                                        label='set up' 
                                        color='white' 
                                        bgColor='primary' 
                                        onClick={() => shippoOnboarding().then(obj => router.push(obj.data.url))}
                                    /> : 
                                    null}
                                </div>
                            </div>
                        </div>
                    </div>
                    : 
                    <ChangeEmailFormController type={revealForm} onGoBack={() => setRevealForm(null)}/>
                }
            </MainContentContainer>
        </div>
    );
};

export default UserProflePage

Firebase云功能:

// Sending user to onboard Shippo
exports.shippoOnboarding = functions.https.onCall(async (data, context) => {

        fetch(URL, {
                method: 'Get',
                headers: {
                    Authorization: `ShippoToken ${accessToken}`,
                    client_id: `${clientId}`,
                    scope: '*',
                    state: `${randomString}`,
                }
            }).then(response =>{
                const site = response.url;
                return site;
            }).catch(function(err) {
                console.info(err + " url: " + url);
            });
            

});

问题

由于某种原因,每次我点击按钮时,我都会得到一个错误,说明“TypeError:null不是对象(正在计算'obj.data. url')”
Screenshot of error message

jtw3ybtb

jtw3ybtb1#

在云函数中,你不返回promises链,因此消费者(前端)不会得到结果。
按如下方式修改应该可以解决问题:

exports.shippoOnboarding = functions.https.onCall(async (data, context) => {

        return fetch(URL, {    // <===== See return here
                method: 'Get',
                headers: {
                    Authorization: `ShippoToken ${accessToken}`,
                    client_id: `${clientId}`,
                    scope: '*',
                    state: `${randomString}`,
                }
            }).then(response =>{
                const site = response.url;
                return site;
            }).catch(function(err) {
                console.info(err + " url: " + url);
            });
            

});

你也可以仔细检查在firebase.utils中是否正确声明了可调用的云函数,请参阅文档。

相关问题