Не может получить доступ к переменным данным и не может вернуть их в Angular Firestore

это потому, что вторая консоль выполняется до первой консоли , поток выполнит запрос к вашему firestore и затем не будет ждать ответ так же, как и он, выполняет другие строки кода. Итак, ваша вторая консоль выполняется перед первой консолью.

let data;
this.firestore.collection('groups').doc(tempId).ref.get().then(function(doc) {
  if (doc.exists) {
      data = doc.data();
      console.log("Document data:", doc.data());   // first console
  } else {
      console.log("No such document!");
  }
}).catch(function(error) {
    console.log("Error getting document:", error);
});
console.log("Service Data :: " + data); //second console

Если вы хотите изменить это поведение, обратитесь ко второй консоли рядом с первой.

Если вы хотите передать данные другому компоненту, используйте BehaviourSubject

  public  dataSource = new BehaviorSubject<any>([]);

  this.dataSource.next(doc.data()); 
  console.log("Document data:", doc.data());   // first console

передайте этот объект dataSource другому компоненту с помощью сервиса. Класс и подписаться как обычные Observable. перейдите по этой ссылке для получения дополнительной информации о angular-поведенческих субъектах-услугах

second Component.ts

constructor(private service: Commonservice) { }

someMethod() {
  this.service.dataSource.subscribe((response: any) =>{
    // do something with data
  })
}

метод .get() возвращает обещание, которое выполняется асинхронно после вызова .then(). Из-за этого следующая исполняемая строка - console.log("Service Data :: " + data);. Javascript не ждет разрешения обещания и просто продолжает следующую синхронную строку, которая является второй консолью.

Обычно я передаю обещание другому компоненту или, что еще лучше, я использую .valueChanges() из .doc(), который возвращает наблюдаемое, и использую асинхронный канал в компоненте, который я использую. переходя к:

// Get Observable on document. Returns Observable<any>
const group$ = this.firestore.doc('/groups' + tempId).valueChanges();

У вас есть две опции:

1. Используйте group$.subscribe();
2. Передайте group$ нужному компоненту и используйте асинхронный канал там

Первый вариант:

// In your component:
let data;
group$.subscribe(doc => {
  if (doc.exists) {
    data = doc
    console.log("Document data:", doc);   // No need to call data().
  } else {
    console.log("No such document!");
  },
  error => console.log("Error getting document:", error);
)

Второй вариант, переход в компонент, где вы хотите, чтобы наблюдаемое было оценено, и данные отображались:

<div *ngIf="group$ | async as doc">
  Your html here {{ doc.someProperty }} further html here...
</div>

Лично я предпочитаю второй вариант, потому что он прекрасно сочетается с фреймворком и удерживает меня от асинхронных ошибок.

Взгляните на репозиторий Angularfire2 Github для документов здесь . Если нет необходимости оценивать наблюдаемое вручную в коде, я бы не стал это делать и позволил фреймворку справиться с этим.

И еще одна заключительная вещь: если вы используете наблюдаемую и хотите выполнить некоторую обработку ошибок при использовании асинхронного канала, вы, вероятно, захотите сделать это при создании наблюдаемой:

// Get Observable on document. Returns Observable<any>
// In error case, returns Observable of the error string
const group$ = this.firestore.doc('/groups' + tempId).valueChanges()
  .pipe(
    catchError(error => of(`Error getting document: ${error}`))
  );